Question

嗨，Stackoverflow社区，

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

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

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

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

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

Answer 1

还有另一种方法可以在html元素中执行物理更改，而不使用引用。取而代之的是，您可以打开和关闭类的元素来执行所需的操作，例如，将菜单切换到框架内和框架外。

下面是不使用ref的情况下如何完成此操作的示例。单击该按钮，您可以想象红色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>

调用componentDidUpdate中的setState以获得基于引用的动画

1 个答案: