调用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>