Javascript 如何从另一个组件访问一个组件的状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36837958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to access one component's state from another component
提问by Vamshi Krishna Lakkars
How do I access one component's state in another component? Below is my code and I'm trying to access the state of component ain component b.
如何在另一个组件中访问一个组件的状态？下面是我的代码，我正在尝试访问 componenta中的 component状态b。
var a = React.createClass({
getInitialState: function () {
return {
first: "1"
};
},
render: function () {
// Render HTML here.
}
});
var b = React.createClass({
getInitialState: function () {
return {
second: a.state.first
};
},
render: function () {
// Render HTML here.
}
});
But I'm not getting anything.
但我什么也没得到。
回答by Naisheel Verdhan
Even if you try doing this way, it is not correct method to access the state. Better to have a parent component whose children are aand b. The ParentComponentwill maintain the stateand pass it as props to the children.
即使您尝试这样做，访问state. 最好有一个父组件，其子组件是a和b。在ParentComponent将保持state并把它作为道具给孩子们。
For instance,
例如，
var ParentComponent = React.createClass({
getInitialState : function() {
return {
first: 1,
}
}
changeFirst: function(newValue) {
this.setState({
first: newValue,
});
}
render: function() {
return (
<a first={this.state.first} changeFirst={this.changeFirst.bind(this)} />
<b first={this.state.first} changeFirst={this.changeFirst.bind(this)} />
)
}
}
Now in your child compoenents aand b, access firstvariable using this.props.first. When you wish to change the value of firstcall this.props.changeFirst()function of the ParentComponent. This will change the value and will be thus reflected in both the children aand b.
现在在您的子组件a和中b，first使用this.props.first. 当您希望更改first.callthis.props.changeFirst()函数的值时ParentComponent。这将改变值，因此将反映在孩子a和b.
I am writing component ahere, bwill be similar:
我在a这里编写组件，b将是类似的：
var a = React.createClass({
render: function() {
var first = this.props.first; // access first anywhere using this.props.first in child
// render JSX
}
}
回答by Jeger
If two components need access to the same state they should have a common ancestor where the state is kept.
如果两个组件需要访问相同的状态，它们应该有一个共同的祖先来保存状态。
So component A is the parent of B and C. Component A has the state, and passes it down as props to B and C. If you want to change the state from B you pass down a callback function as a prop.
所以组件 A 是 B 和 C 的父组件。组件 A 拥有状态，并将其作为道具传递给 B 和 C。如果您想从 B 更改状态，您可以将回调函数作为道具传递。
回答by Ally Jr
I would suggest you use a state manager like Redux (personal favorite), MobX reflux, etc to manage your state.
我建议您使用 Redux（个人最喜欢的）、MobX 回流等状态管理器来管理您的状态。
How these works is they allow you to contain all shared state in one state storage (called a store), and whatever component needs access to a part of that shared state, it will just get it from the store.
这些是如何工作的，它们允许您将所有共享状态包含在一个状态存储（称为存储）中，并且任何组件需要访问该共享状态的一部分，它都会从存储中获取它。
It looked very hard to get started with but once you get over the small challenges, get 2 or 3 "wtf's" out of the way. It gets easier.
开始看起来很难，但是一旦你克服了小挑战，就可以避开 2 或 3 个“wtf”。它变得更容易。
Take a look here: http://redux.js.org/
看看这里：http: //redux.js.org/
EDIT:Redux is good but the boilerplate code is really a turn off... for those of you looking for a simpler, more magical (this can be good and bad) solution use mobx : https://mobx.js.org/
编辑：Redux 是好的，但样板代码真的是一个关闭......对于那些正在寻找更简单，更神奇（这可能是好的和坏的）解决方案的人来说，使用 mobx：https://mobx.js.org/
回答by Hassan Kandil
in the child component create function that sets the state:
在设置状态的子组件创建函数中：
changeTheState(){
this.setState({something:"some value"})
}
and in parent component give the child a ref as following:
并在父组件中给子组件一个 ref 如下：
<Child ref={component => this._child = component}/>
then in parent make a function to access the changeTheState()
然后在父级中创建一个函数来访问 changeTheState()
parentFunction(){
this._child.changeTheState();
} and just use the parentFunction.
只需使用 parentFunction。
回答by minhguy.
If you have A and B component where B is a child of A, you can pass a function to change the state of A though props to B.
如果您有 A 和 B 组件，其中 B 是 A 的子代，则可以传递一个函数来通过 props 将 A 的状态更改为 B。
function B(props) {
return <button onClick={props.changeA} />
}
class A extends React.Component {
//constructor
//pass this function to B to change A's state
handleA() {
this.setState({});
}
render() {
return <B changeA={() => this.handleA()} />
}
}
