Javascript 如何访问一个组件&x27；从另一个组件获取状态

如何在另一个组件中访问一个组件的状态？下面是我的代码，我正在尝试访问组件

b

中组件

a

的状态

var a=React.createClass({
getInitialState:函数（）{
返回{
第一：“1”
};
},
渲染：函数（）{
//在这里呈现HTML。
}  
});
var b=React.createClass({
getInitialState:函数（）{
返回{
第二：州第一
};
},
渲染：函数（）{
//在这里呈现HTML。
}  
});

---

但是我没有得到任何东西。

如果两个组件需要访问相同的状态，那么它们应该有一个共同的祖先来保存状态

所以A组分是B和C的母体。 组件A拥有状态，并将其作为道具传递给B和C。

---

如果您想从B更改状态，则将回调函数作为道具传递。

即使您尝试这样做，访问

状态的方法也不正确。最好有一个父组件，其子组件是
a
和
b
。
ParentComponent
将维护
状态
，并将其作为道具传递给孩子

比如说,

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)} />
   )
 }
}

我建议您使用状态管理器，如Redux（个人收藏夹）、MobX Reflection等来管理您的状态

它们的工作原理是，它们允许您将所有共享状态包含在一个状态存储（称为存储）中，并且无论哪个组件需要访问该共享状态的一部分，它都将从存储中获取它

这看起来很难开始，但一旦你克服了小挑战，2或3个“wtf的”的方式。它变得容易了

请看这里：

编辑：Redux很好，但样板代码真的让人讨厌。。。对于那些正在寻找更简单、更神奇（这可能是好的也可能是坏的）解决方案的人，请在设置状态的子组件创建函数中使用mobx:
：

changeTheState(){
   this.setState({something:"some value"})
}

在父组件中，给子组件一个ref，如下所示：

<Child ref={component => this._child = component}/>

}
只需使用parentFunction。
如果有A和B组件，其中B是A的子组件，则可以通过传递函数将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()} />
    }
}

功能B（道具）{
返回
}
类扩展了React.Component{
//建造师
//将此函数传递给B以更改A的状态
handleA（）{
this.setState（{}）；
}
render（）{
返回此。handleA（）}/>
}
}
仅在redux/mobx上存储全局数据store@SibeliusSeraphini嗯，是真的吗？你能分享更多的论点或想法吗？
  parentFunction(){
this._child.changeTheState();

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()} />
    }
}