我目前正在嘗試將類組件（工作）更改為功能組件（不工作）?；旧?，我的目標是使元素位于頁面中心。編輯：如果任何人都可以發(fā)表評論ref={tc=>(this.treeContainer=tc)}，這也會非常有幫助！我的班級組件（有效）：/** * Component returning a div containing a tree * Need to declare as class for ComponentDidMount() */class CenterMe extends React.PureComponent { state={} /* Used to center the tree on render */ componentDidMount() { const dimensions = this.treeContainer.getBoundingClientRect(); this.setState({ translate: { x: 30, y: dimensions.height / 2 } }); } /* Returns the actual tree content */ render(){ return( <div class="treeWrapper" ref={tc => (this.treeContainer = tc)}> <Tree translate = {this.state.translate} /> </div> ); }}我當(dāng)前的功能組件看起來像這樣并且不起作用：function CenterMe() { const [state, setState] = useState({translate:{x:0,y:0}); // Added thanks to @jstu /* Used to center the tree on render */ useEffect(()=> { const dimensions = treeContainer.getBoundingClientRect(); setState({ translate: { x: 30, y: dimensions.height / 2 } }); }); /* Returns the actual tree content */ return( <div class="treeWrapper" ref={tc => (this.treeContainer = tc)}> <Tree translate = {this.state.translate} /> </div> );}更具體地說，它抱怨 setState 和 treeContainer 沒有定義。如果重要的話，樹組件是從react-d3-tree導(dǎo)入的，翻譯函數(shù)基本上按照字面意思做——它移動樹。我認為問題主要集中在ref={tc=>(this.treeContainer=tc)}，所以對此的解釋也有幫助。太感謝了！
3 回答
瀟瀟雨雨
TA貢獻1833條經(jīng)驗 獲得超4個贊
您需要使用添加兩個鉤子useRef來useState進行轉(zhuǎn)換
function CenterMe() {
?const [translate, setTranslate] = useState({ x: 0, y: 0 });
?const treeContainer = useRef(null)
?/* Used to center the tree on render */
?useEffect(()=> {
? const dimensions = treeContainer.current.getBoundingClientRect();
? setTranslate({
? ? ? x: 30,
? ? ? y: dimensions.height / 2
? });
?}, []);
/* Returns the actual tree content */
? return(
? ? ? <div class="treeWrapper" ref={treeContainer}>
? ? ? ? ? <Tree
? ? ? ? ? ? ? translate={translate}
? ? ? ? ? />
? ? ? </div>
? );
}
useState 將替換基于類的組件中的 setState，如果您訪問 treeContainer.current 鍵，則 useRef 將為您提供當(dāng)前引用。
為了解釋什么是 ref 部分，基本上，您的情況下的 ref 是引用 dom 節(jié)點，例如，如果您的樹組件如下所示：
<div className="awesome-class">
?<p>Hi</p>
</div>
use ref 在這里所做的是，它會給你 dom 元素 ref，假設(shè)樹組件像上面的例子一樣，它看起來像這樣。
? ? <div class="treeWrapper">
? ? ?<div className="awesome-class">
? ? ? <p>Hi</p>
? ? ?</div>
? ? </div>
通過 ref，您可以從 dom 獲取元素，例如，在您的特定情況下，getBoundingClientRect將為您提供該特定元素的大小，正如您所看到的，這非常有用，因為您可以使用父組件中的子值。
元芳怎么了
TA貢獻1798條經(jīng)驗 獲得超7個贊
所以你似乎錯過了狀態(tài)掛鉤。嘗試這個
function CenterMe() {
const [state, setState] = useState({translate:{x:0,y:0}}); // Set an initial state
const treeContainer = useRef(null);
/* Used to center the tree on render */
useEffect(()=> {
const dimensions = treeContainer.current.getBoundingClientRect();
setState({
translate: {
x: 30,
y: dimensions.height / 2
}
});
},[]);
/* Returns the actual tree content */
return(
<div class="treeWrapper" ref={treeContainer}>
<Tree
translate = {state.translate}
/>
</div>
);
}
我沒有測試過這個。但您缺少的是 useState 掛鉤。我還注意到您的意思是實現(xiàn) componentDidMount。所以你需要在最后傳遞一個空數(shù)組。這樣它的行為就像 componentDidMount
汪汪一只貓
TA貢獻1898條經(jīng)驗 獲得超8個贊
好的，有幾件事。Use state 返回一個可以使用語法 [] 解構(gòu)的數(shù)組。像這樣
const [someName, setSomeName] = useState({
translateX: 10,
translateY: 20
})
您正在為 useState 提供一個匿名函數(shù)。不知道你能不能做到，以前沒做過。
但請嘗試我上面寫的解決方案。通過調(diào)用該方法設(shè)置 translatioY 的值，然后在 Tree 組件中執(zhí)行此操作。
<Tree translate = {someName}/>
對于 ref 你必須使用 useRef() 鉤子
- 3 回答
- 0 關(guān)注
- 179 瀏覽
添加回答
舉報
0/150
提交
取消