[英]How to pass state with parent to child component
Is there any way passing state from parent component to child component like: 是否有任何方式将状态从父组件传递到子组件,如:
var ParentComponent = React.createClass({
getInitialState: function() {
return {
minPrice: 0
}
},
render: function() {
return (
<div onClick={this.doSomething.bind(this, 5)}></div>
);
}
});
var ChildComponent = React.createClass({
getInitialState: function() {
return {
minPrice: // Get from parent state
}
},
doSomething: function(v) {
this.setState({minPrice: v});
},
render: function() {
return (
<div></div>
);
}
});
I want to change parent state value from child component. 我想从子组件更改父状态值。 In react.js is it possible or not?
在react.js有可能吗?
There is but it's not intended to work like that in React. 有 ,但它并不打算这样工作的反应。 2-way data binding isn't the way to go in React, excerpt from the docs.
双向数据绑定不是React的方法,摘自文档。
In React, data flows one way: from owner to child.
在React中,数据以一种方式流动:从所有者到子。
So what you want to do if you want to manipulate parent state in your child component is passing a listener. 因此,如果要在子组件中操作父状态,则要执行的操作是传递侦听器。
//parent component's render function
return (
<Child listenerFromParent={this.doSomething} />
)
//child component's render function
return (
<div onClick={this.props.listenerFromParent}></div>
)
You can use the limelights solution, ie passing a function from the parent to the child. 您可以使用limelight解决方案,即将函数从父级传递给子级。
Or you can also use projects like React-Cursor which permits to easily manipulate state passed from a parent component in a child. 或者您也可以使用像React-Cursor这样的项目,它允许轻松操作从子组件中的父组件传递的状态。
I have made my home made framework (Atom-React, some details here ) that also use cursors (inspired by Om), and you can somehow achieve easily 2-way data binding with cursors permitting to manipulate the state managed by a parent component. 我已经制作了我的自制框架(Atom-React, 这里有一些细节 ),它们也使用游标(受Om启发),你可以用某种方式轻松实现与游标的双向数据绑定,允许操纵由父组件管理的状态。
Here's an exemple usage: 这是一个例子:
<input type="text" valueLink={this.linkCursor(this.props.inputTextCursor)}/>
The inputTextCursor
is a cursor passed from a parent to a child component, and thus the child can easily change the data of the parent seemlessly. inputTextCursor
是从父组件传递到子组件的游标,因此子组可以轻松地无需更改父组件的数据。
I don't know if other cursor-based React wrappers use this kind of trick but the linkCursor
function is implemented very easily with a simple mixin: 我不知道其他基于游标的React包装器是否使用这种技巧,但是使用简单的mixin非常容易实现
linkCursor
函数:
var ReactLink = require("react/lib/ReactLink");
var WithCursorLinkingMixin = {
linkCursor: function(cursor) {
return new ReactLink(
cursor.getOrElse(""),
function setCursorNewValue(value) {
cursor.set(value);
}
);
}
};
exports.WithCursorLinkingMixin = WithCursorLinkingMixin;
So you can easily port this behavior to React-Cursor 因此,您可以轻松地将此行为移植到React-Cursor
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.