如何在另一个组件中访问一个组件的状态？下面是我的代码，我正在尝试访问 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.
}
});
但我什么也没得到。
即使您尝试这样做，访问state. 最好有一个父组件，其子组件是a和b。在ParentComponent将保持state并把它作为props给孩子们。
例如，
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)} />
)
}
}
现在在您的子组件a和中b，first使用this.props.first. 当您希望更改first.callthis.props.changeFirst()函数的值时ParentComponent。这将改变值，因此将反映在孩子a和b.
我在a这里编写组件，b将是类似的：
var a = React.createClass({
render: function() {
var first = this.props.first; // access first anywhere using this.props.first in child
// render JSX
}
}
如果两个组件需要访问同一个状态，它们应该有一个共同的祖先来保存状态。
所以组件 A 是 B 和 C 的父组件。组件 A 拥有状态，并将其作为props传递给 B 和 C。如果您想从 B 更改状态，您可以将回调函数作为props传递。
我建议您使用 Redux（个人最喜欢的）、MobX 回流等状态管理器来管理您的状态。
这些是如何工作的，它们允许您将所有共享状态包含在一个状态存储（称为存储）中，并且任何组件需要访问该共享状态的一部分，它都会从存储中获取它。
开始看起来很难，但是一旦你克服了小挑战，就可以避开 2 或 3 个“wtf”。它变得更容易。
看看这里：http : //redux.js.org/
编辑： Redux 是好的，但样板代码真的是一个关闭......对于那些正在寻找更简单，更神奇（这可能是好的和坏的）解决方案的人来说，使用 mobx：https ://mobx.js.org/
在设置状态的子组件创建函数中：
changeTheState(){
this.setState({something:"some value"})
}
并在父组件中给子组件一个 ref 如下：
<Child ref={component => this._child = component}/>
然后在父级中创建一个函数来访问 changeTheState()
parentFunction(){
this._child.changeTheState();
并只使用 parentFunction。
如果您有 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()} />
}
}