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

How to access one component's state from another component

本文关键字：组件 访问 另一个 状态 一个      更新时间：2023-09-26

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

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并将其作为道具传递给孩子们。

例如

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中，使用 this.props.first 访问first变量。当您希望更改first调用的值时this.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 具有状态，并将其作为道具传递给 B 和 C。如果你想从 B 更改状态，你可以传递一个回调函数作为道具。

我建议你使用像Redux（个人收藏夹），MobX反流等状态管理器来管理你的状态。

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

这看起来很难开始，但是一旦你克服了小挑战，就把2或3个"wtf"排除在外。它变得更容易。

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

编辑：Redux很好，但样板代码真的是一个关闭... 对于那些寻找更简单，更神奇（这可能是好事也可能坏事）解决方案的人，请使用mobx：https://mobx.js.org/

在

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

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

并在父组件中为子组件提供一个引用，如下所示：

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

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

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

并且只需使用父函数。

如果你有 A 和 B 组件，其中 B 是 A 的子组件，你可以传递一个函数来更改 A 的状态，通过 props 到 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()} />
    }
}

看看 React Context

上下文提供了一种通过组件树传递数据的方法，而不必在每个级别手动传递 props。

如果需要，您还可以从嵌套组件更新上下文。

相关文章：