怎么说React数据已经更新？

Question

正如你猜测的那样，我是JS的新手，尤其是React。

我有一个变量list用于保存我的计算。我有一个拖放和表单处理程序，但是当数据更新时，反应仍然不知道。

我应该使用一些特殊命令来更新this.props.data还是更好的方法是在React组件中写入所有逻辑？

btw，list由runs[]组成。每个run都有id和balls[]。 ball有counter和value。

/** @jsx React.DOM */

var Table = React.createClass({
    render: function() {
        return  (<table className='table table-bordered bg-success'>
        {this.props.data.map(function (run){
            return <TablesRun runId={id}/>;
        })}
            </table>);
        }
});

var TablesRun = React.createClass({
    render: function() {
        return  <tr className='bg-warning'>
                    <td>
                        <span className='badge'>{this.props.runId}</span>ff
                    </td>
                </tr>;
    }
});

React.renderComponent(<Table data={list.runs}/>,
    document.getElementById('runTable'));

Answer 1

如果更新React组件之外的list变量，则需要告诉React再次渲染。 React不使用数据绑定来知道您已修改变量。

只需再次调用React.renderComponent(<Table data={list.runs}/>, document.getElementById('runTable'));，React将使用新的prop值更新DOM。

Answer 2

  

我应该使用一些特殊命令来更新this.props.data

是的，使用setProps而不是直接更新对象。但是，请注意文档页面上的警告：通常不需要调用setProps，并且仅适用于根组件。