javascript - React js访问另一个类的状态

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

class classname2 extends React.Component {
  ...
  this.state = { statename1: "lala" };
  ...
};

class classname1 extends React.Component {
  render() {
    return (
       {classname2.state.statename1 }
    );
  }
};

最佳答案

如评论中所述，将状态作为道具传递给孩子。

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

一种常用的模式是将任意props传递到组件树下：

const {needThisOne, andThisOne, ...props} = this.props;
// do stuff with needThisOne andThisOne
// and pass the remaining props down:
return <Component {...props} />;

钩子的更新，因为为什么不这样。

const ParentComponent = ({...props}) => {
   const [stateName1, setStateName1] = useState('defaultValue');
   return <ChildComponent stateName1={stateName1} {...props} />;
}

const ChildComponent = ({stateName1, ...props}) => (
    <span>{stateName1}</span>
);