調用componentDidUpdate中的setState以獲得基於引用的動畫

Question

您好Stackoverflow社區，

我正在React應用程序中做一些自定義動畫，其中涉及更新position: absolute的組件的邊距。 這是一個可以切換的菜單。

我對它后面的元素有一個ref ，我正在componentDidMount獲取其節點高度。 我使用這個高度來知道將切換部件移動多遠。

我注意到，當我的應用第一次渲染組件時，我的組件沒有設置正確的動畫，因為高度值始終為零。 當我隨后切換它時，它會起作用，因為componentDidMount會觸發並正確更新其他節點的高度。

為了解決這個問題，我將divHeight字段移到state並開始在componentDidMount調用setState ，現在我的可切換組件每次都正確呈現。

這是反模式嗎？ 我看不到要如何基於HTML節點的物理屬性來更新UI，因為這些屬性只能通過componentDidMount refs獲得...

Answer 1

還有另一種方法可以在html元素中執行物理更改，而不使用引用。 取而代之的是，您可以打開和關閉類的元素來執行所需的操作，例如將菜單切換為框架內和框架外。

下面是一個不使用引用如何完成的示例。 單擊該按鈕，您可以想象紅色div是您的頂部導航菜單。

 class MenuExample extends React.Component { constructor(props) { super(props); this.onToggleMenu = this.onToggleMenu.bind(this); this.state = { menuToggle: false }; } onToggleMenu(e) { this.setState({ menuToggle: !this.state.menuToggle }); } render() { return ( <div> <button onClick={this.onToggleMenu}>Open menu</button> <div className={`menu ${this.state.menuToggle && 'active'}`} /> </div> ); } } // Render it ReactDOM.render( <MenuExample/>, document.getElementById("react") ); 

 button { position: absolute; top: 150px; } .menu { position: absolute; top: -100px; left: 0px; width: 100%; height: 100px; background-color: red; transition: all .3s ease-in; -webkit-transition: all .3s ease-in; } .menu.active { top: 0px; } 

 <div id="react"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>