Question

如何在另一个组件中访问一个组件的状态？以下是我的代码，我尝试访问组件a中的组件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.
    }  
});

但我没有得到任何东西。

Answer 1

即使您尝试这样做，也不是正确的方法来访问state。最好有一个父组件，其子组件为a和b。 ParentComponent将维护state并将其作为道具传递给孩子。

例如，

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的{{1}}调用this.props.changeFirst()函数的值时。这会改变价值，因此会反映在孩子ParentComponent和a中。

我在这里编写组件b，a将类似：

Answer 2

如果两个组件需要访问相同的状态，则它们应该具有保持状态的共同祖先。

因此，组件A是B和C的父级。组件A具有状态，并将其作为道具传递给B和C. 如果要从B更改状态，则将回调函数作为prop传递。

Answer 3

我建议您使用Redux（个人喜欢的），MobX反流等州经理来管理您的州。

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

开始时看起来很难，但是一旦你克服了小挑战，就得到2或3＆＃34; wtf＆＃34;＆＃34;不碍事。它变得更容易。

看看这里：http://redux.js.org/

编辑： Redux很好但是样板代码实际上是关闭的...对于那些寻找更简单，更神奇（这可能是好的和坏的）解决方案的人来说使用mobx： https://mobx.js.org/

Answer 4

子组件创建函数中的设置状态：

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

并在父组件中为孩子提供以下引用：

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

然后在父对象中创建一个函数来访问changeTheState（）

  parentFunction(){
this._child.changeTheState();

} 并只需使用parentFunction。

Answer 5

如果您拥有A和B组件，其中B是A的子代，则可以通过一个函数将prop的属性更改为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()} />
    }
}

Answer 6

好的，大家好。请让我们认真对待函数式编程。.所以回头再回答您的问题。创建一个props thats一个可能称为this.props.sendValue(this.state)的函数，并在父组件中初始化该函数。 <NewComponent><Component sendValue={(args)=> return(args)}/></NewComponent>

大声笑。实际尚未尝试过，但这应该是您问题的解决方案

如何从另一个组件访问一个组件的状态

6 个答案: