React.js性质

Question

我目前正在研究React.js的文档，并有一个关于this.props的问题，根据文档，这个问题应该被认为是不可变的，并且只向下推到所有权树下，因为不鼓励向上冒泡自定义事件。

假设我有一个UI，其中页面标题中的组件的状态应该与页面正文中嵌套的另一个组件共享，让我们使用一个简单的复选框，它表示某种特定的状态，它将影响某些嵌套跨或div的可见性。

我目前看到这一点的唯一方法是创建一个从顶层元素向下推到子元素的状态属性。

与此有关的两个问题是：

1. 这是否意味着我应该创建一个拥有整个页面的组件？(用单个所有者组件将整个页面呈现为可以接受的操作吗？我理解虚拟DOM和扩散的概念，所以我假设这不是一个问题，但我还是想要一些确认，以防我错过了一些相关的东西)；
2. 单击复选框时可以更改this.props上的属性，以便重新呈现页面上的其他组件吗？这并不是说道具是不可变的(也许它们仅仅意味着在this.props链下设置新的道具是不被接受的，以避免错误情况下的不透明堆栈跟踪，但是更改状态属性的值是？)。

如能确认，将不胜感激。

谢谢。

Answer 1

1)整页中有一个父母是可以的，但并不总是必要的。这取决于是否有必要在组件之间共享状态。

2)你从来不想通过this.props.someValue = newValue改变道具。如果需要从子组件修改父状态，则应该始终使用回调来完成。下面的示例演示如何使用回调函数handleClick在多个组件之间共享复选框状态以修改is_checked状态。

示例JSFiddle：https://jsfiddle.net/mark1z/o7noph4y/

var Parent = React.createClass({
    getInitialState: function(){
        return ({is_checked: 0})
    },
    handleClick: function(){
        this.setState({is_checked: !this.state.is_checked})
    },
    render: function(){
        return (
            <div>
                <CheckBox is_checked={this.state.is_checked} handleClick={this.handleClick}/>
                <OtherComponent is_checked={this.state.is_checked} />
            </div>
        );
    }
});

var CheckBox = React.createClass({
    render: function() {
        return (
            <input type="checkbox" onChange={this.props.handleClick}> Show other component </input>

        );
    }
});


var OtherComponent = React.createClass({
    render: function() {
        return (
            <div style={{marginTop: 20}}> 
                {this.props.is_checked ? 'The checkbox is ticked' :  'The checkbox is not ticked'}
            </div>

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