javaweb-react的入门遇到的问题二:组件的生命周期

在菜鸟教程接触到react组件的生命周期:

其中有一个实例:以下实例在 Hello 组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒重新设置组件的透明度,并重新渲染:

var Hello = React.createClass({
  getInitialState: function () {
    return {
      opacity: 1.0
    };
  },
 
  componentDidMount: function () {
    this.timer = setInterval(function () {
      var opacity = this.state.opacity;
      opacity -= .05;
      if (opacity < 0.1) {
        opacity = 1.0;
      }
      this.setState({
        opacity: opacity
      });
    }.bind(this), 100);
  },
 
  render: function () {
    return (
      <div style={{opacity: this.state.opacity}}>
        Hello {this.props.name}
      </div>
    );
  }
});
 
ReactDOM.render(
  <Hello name="world"/>,
  document.body
);

在网页实例的尝试之后发现是一个渐变的样式,但是加进自己的demo之后发现其他组件都消失了。

------

发现这个render的函数加入的是body,可能对之前的render进行了覆盖的操作


猜你喜欢

转载自blog.csdn.net/searlas/article/details/79739554