Question

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

假设我有一个UI，页面标题中的组件状态应该与页面正文中嵌套的另一个组件共享，让我们看一个简单的复选框，代表一些特定的状态，影响一些嵌套跨度或div的可见性我目前看到的唯一方法就是创建一个从顶部元素向下推送到子元素的状态属性。

我对此的两个相关问题是：

这是否意味着我应该创建一个拥有整个页面的组件？（渲染具有单个所有者组件的整个页面是否可以接受？我理解虚拟DOM的概念和差异所以我认为这不是问题，但是我想要一些确认，以防错过相关的东西） ;
单击复选框时，是否可以更改this.props上的属性，以便重新呈现页面上的其他组件？这不会使道具不可变（也许它们只是意味着在链上的this.props上设置新道具是不被接受的，以避免在出现错误时出现不透明的堆栈跟踪，但更改状态属性的值是？）。

一些确认将不胜感激谢谢。

Answer 1

我想有一个主要组件不是问题。 docs建议您找到可以为其子级提供所需数据的最顶层组件 - 这可能很容易成为顶级主组件。根据我的理解，您将拥有主页面的主要组件 - 应该是唯一使用state的组件，孩子们只是在props中呈现它们的内容。所以不，道具不应该由不拥有数据的孩子改变，这是最重要的组成部分。让我们假设您在页面上有另一个窗口小部件，它只关心一组不同的数据，您可以将其作为另一个树的根，它可以获取数据并设置它state和{{ 1}}它的孩子。

以下是这种情况的糟糕图表：

App -(props)-> ItemList -(props)-> Item -(props)-> Photo 
 +  +                               |
 +   ++++++++++                     |----(props)-> LikeButton
 +            +                     |
(fetch)       +                     |
 +            +                     * ---(props)-> Description
 ++(setState)++

Widget -(props)-> Whether

然而，当facebook graphql最终确定并且每个组件都可以在其上声明所需的数据时，它会变得更有趣，我很期待它。但在此之前，顶级组件必须知道每个子节点需要哪些数据，并且所有父节点都需要将这些数据下载。

Answer 2

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'));

React.js属性

2 个答案: