[英]React.js properties
I am currently going through the documentation of React.js and have a question about this.props
, which according to the docs should be considered immutable and only pushed downwards down the ownership tree since bubbling custom events upwards is discouraged. 我目前正在浏览React.js的文档,并有一个关于
this.props
的问题,根据文档,应该将其视为不可变的,并且由于不鼓励将自定义事件向上冒泡,因此只能将其向下推到所有权树上。
Say that I have a UI where the state of a component in the header of the page should be shared with another component that is nested somewhere in the body of the page, let's take a simple checkbox that represents some specific state that will influence the visibility of some nested spans or divs. 假设我有一个UI,页面标头中组件的状态应与嵌套在页面主体某处的另一个组件共享,让我们使用一个简单的复选框来表示将影响可见性的某些特定状态一些嵌套的span或div。
The only I way I currently see this achieved is by creating a state property that is pushed downwards from the top element to the child elements. 我目前看到的唯一实现方式是创建一个state属性,该属性从top元素向下推到子元素。
The two related questions I have with this is: 我对此有两个相关的问题是:
this.props
down the chain is not accepted to avoid an untransparent stack trace in case of bugs, but changing the value of a state property is?). this.props
上设置新的props不被接受以避免在bug的情况下避免不透明的堆栈跟踪,但是改变state属性的值是?)。 Some confirmation would be appreciated. 一些确认将不胜感激。
Thanks. 谢谢。
I guess having one master component isn't an issue. 我想拥有一个主组件不是问题。 The docs suggest that you find the topmost component that can supply it's children with the needed data - and this could easily be the toplevel master component.
文档建议您找到可以为子级提供所需数据的最顶层组件,而这很容易成为顶层主组件。 As I understand this you would have a master component for your main page - that should be the only one that uses
state
, the children just render what they are given in props
. 据我了解,您将在主页上拥有一个主组件-应该是唯一使用
state
,子组件只是渲染props
中给出的内容。 So no, props should not be altered by a child that doesn't own the data, it is the topmost components prerogative to do so. 因此,不,不应该拥有数据的孩子不能更改道具,这是特权所在。 Let's say you have another widget on the page that only cares for a distinct set of data you would make this the root of another tree that fetches data and sets it's
state
and the props
of it's children. 比方说,你有页面上的其他部件,只有关心一组不同的数据,你会作出这样的另一个树获取数据,并设置它的根
state
和props
它的孩子。
Here is a crappy graph for this situation: 这是这种情况的糟糕图:
App -(props)-> ItemList -(props)-> Item -(props)-> Photo + + | + ++++++++++ |----(props)-> LikeButton + + | (fetch) + | + + * ---(props)-> Description ++(setState)++ Widget -(props)-> Whether
However it gets more interesting when facebook's graphql is finalized and every component can declare the needed data on it's own, I'm looking forward to it. 但是,当facebook的graphql完成并且每个组件都可以自行声明所需的数据时,它会变得更加有趣,我很期待。 But until then the toplevel component has to know which data every child needs and all the parent nodes need to hand this data down.
但是直到那时,顶层组件才必须知道每个孩子都需要哪些数据,所有父节点都需要将这些数据传下来。
1) It is fine to have one parent for the whole page, but is not always necessary. 1)在整个页面中只有一位家长是可以的,但并非总是必要的。 It depends on if it is necessary to share the state between components.
这取决于是否有必要在组件之间共享状态。
2) You never want to alter props via this.props.someValue = newValue
. 2)您永远不想通过
this.props.someValue = newValue
来更改道具。 If you need to modify the parent state from a child component, it should always be done with a callback. 如果需要从子组件修改父状态,则应始终通过回调来完成。 The example below shows how to share the checkbox state between multiple components using the callback function
handleClick
to modify the state of is_checked
. 下面的示例演示如何使用回调函数
handleClick
修改is_checked
的状态, is_checked
在多个组件之间共享复选框状态。
JSFiddle of example: https://jsfiddle.net/mark1z/o7noph4y/ 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'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.