基于refs的动画在componentDidUpdate中调用setState

Question

您好 Stackoverflow 社区，

我在我的 React 应用程序中做一些自定义动画，包括使用 position: absolute 更新组件的边距。这是一个可以切换进出的菜单。

我有一个ref 用于它在后面切换的元素，我在componentDidMount 中抓取了它的节点高度。我使用这个高度来知道将我的切换组件移动多远。

我注意到，当我的应用第一次渲染时，我的组件动画不正确，因为高度值始终为零。当我随后切换它时，它会起作用，因为componentDidMount 会触发并正确更新另一个节点的高度。

为了解决这个问题，我将我的 divHeight 字段移动到状态并开始在 componentDidMount 中调用 setState，现在我的可切换组件每次都能正确呈现。

这是一种反模式吗？我看不出如何根据 HTML 节点的物理属性更新我的 UI，因为这些只能通过 refs 中的 componentDidMount 获得...

Answer 1

还有另一种方法可以在 html 元素中执行物理更改，而不是使用 refs。相反，您可以打开和关闭类元素来做您想做的事情，例如在框架内和外切换菜单。

下面是一个不使用 refs 的例子。单击按钮，您可以想象红色 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>