在反应中从父组件访问子组件的子状态

Question

我想<Child2>从父组件访问状态。

<Parent>
   <Child1>
      <Child2>
   </Child1>
</Parent>

如何实现？

Answer 1

你根本不应该这样做。在反应中，信息应该始终从上到下流动。这样做的反应方法是将状态提升到父级并将值作为道具向下传递。在您的孩子中，您有回调，这些回调也作为孩子调用的道具传递，当值发生变化时（例如通过用户交互），以便父级可以更新其状态：

const Child = ({ value, onChange }) => (
  <Fragment>
    <p>{value || "no value"}</p>
    <button onClick={() => onChange('changed')} >Set value</button>
  </Fragment>
);

class Parent extends Component {
  state = {
    value: null
  };

  handleChange = value => this.setState({value})

  render() {
    return <Child value={this.state.value} onChange={this.handleChange} />;
  }
}

代码沙盒上的工作示例

这可以无限深嵌套来完成。在一个更大的应用程序中，您的状态需要在遍布组件树的多个组件中使用，您可能会达到获得 PITA 的地步。解决这个问题的常用方法是使用像redux提供的全局存储。