Question

如何访问另一个班级的状态。
这种结构不起作用

class classname2 extends React.Component {
  ...
  this.state = { statename1: "lala" };
  ...
};

class classname1 extends React.Component {
  render() {
    return (
       {classname2.state.statename1 } 
    );
  }
};

Answer 1

正如评论中所提到的，将状态作为道具传递给他们的孩子。

class classname2 extends React.Component {
  this.state = { statename1: "lala" };
  render() {
    return <classname1 statename1={this.state.statename1} />
  }
};

class classname1 extends React.Component {
  render() {
    return (
       <div>{this.props.statename1}</div>
    );
  }
};

Answer 2

直接访问组件之间的共享状态是一种反模式。每个组件都应该有自己的状态。如果您需要全局可用状态，请考虑使用Redux。

起初听起来有点麻烦，但它很棒，它可以让你的应用程序得到适当的测试。

修改：

将状态作为道具传递也是有效的，但它仅在组件处于父子顺序时才有效。 Redux允许组件更新，无论它们的关系是什么

React js访问另一个类的状态

2 个答案: