Question

我有这样的组件：

class GettingStarted extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      measureCompletion: '0%',
    };
  }

  componentDidMount() {
    this.setState({
      measureCompletion: '70%',
    });

  }

  render() {
      ...
      <div style={{width: this.state.measureCompletion}}></div>
     .....

首次加载时这种行为是正确的，当组件加载时，宽度从0％设置为70％，这会导致一个很好的动画，这个css：

      transition: width 1s cubic-bezier(0,0,.2,1) .5s;

问题是，如果我导航到我的应用程序中的另一个组件然后返回到此组件，则在调用构造函数时，div宽度不会被更改而不是动画。

为什么不重新渲染宽度值，导致所需的动画？

由于

Answer 1

这可能是由于我能想到的几个原因引起的。当你说'导航＆＃39;我发现你正在使用react-router，所以我假设你要去一个链接然后回来。

现在导航回组件时状态相同的原因是它从未卸下过。通过传递路由道具来反应路由器更新组件。查看ReactTraining网站上的文档。

由于您的组件已经安装并且将从React Router接收新的道具，这可能是检查componentWillReceiveProps的好时机。

在安装的组件接收新道具之前调用componentWillReceiveProps（）。如果您需要更新状态以响应prop更改（例如，重置它），您可以比较this.props和nextProps并使用此方法中的this.setState（）执行状态转换。

将状态重置为0以启动动画后，您可以使用 componentDidUpdate 来触发css动画。

React组件从构造函数到componentDidMount的状态更改是否影响Render？

1 个答案: