反应子组件道具没有更新答案

【问题标题】：React child component props are not updating反应子组件道具没有更新
【发布时间】：2015-08-13 18:58:23
【问题描述】：

我正在尝试在其 componentDidMount 上将一个组件渲染为 Counter 到另一个组件 Panel。我还将一个名为count 的状态作为道具传递给Counter。在一定的时间间隔内，我正在更新状态。但问题是Counter 的道具没有更新。道具仍然保持初始值。是什么原因？

/** @jsx React.DOM */

var Panel = React.createClass({

  getInitialState: function(){
    return {
      count: 0
    }
  },

  tick: function() {
    setInterval(function(that) {
      that.setState({
        count: that.state.count + 1
      });
    }, 500, this);
  },

  componentDidMount: function() {
    var panel = React.findDOMNode(this.refs.panel);
    React.render(<Counter count={this.state.count}/>, panel);
    this.tick();
  },

  render: function(){
    return <div ref="panel"></div>;
  }

});

var Counter = React.createClass({

  render: function() {
    return <p>{this.props.count}</p>
  }

});

React.render(<Panel/>, document.getElementById('container'));



<body>
  <div id="container"></div>
</body>

我想知道这段代码不起作用的反应原因

JS斌check here

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

这个代码是香蕉。为什么在组件内调用React.render？只需在 render 函数中渲染计数器即可。

/** @jsx React.DOM */

var Panel = React.createClass({

  getInitialState: function(){
    return {
      count: 0
    }
  },

  tick: function() {
    setInterval(function(that) {
      that.setState({
        count: that.state.count + 1
      });
    }, 500, this);
  },
  componentDidMount() {
    this.tick();
  },
  render: function(){
    return <div ref="panel"><Counter count={this.state.count}/></div>;
  }

});

var Counter = React.createClass({

  render: function() {
    return <p>{this.props.count}</p>
  }

});

React.render(<Panel/>, document.getElementById('container'));

【讨论】：

你是对的。但我想知道为什么我的代码是错误的。如果您在 componentDidMount 中渲染组件，反应是否会创建所有者所有者关系？
这是错误的，因为您错过了 React 的全部要点。 React 唯一的设计目的就是为你处理渲染。如果你手动调用render，那么你正在积极地对抗 React。
我不知道，谢谢。当我尝试在单个容器上动态加载组件时遇到了这个问题。在项目中这种动态儿童托管的情况通常如何？