reactjs - 在 react 中从父组件访问子组件的子状态

Question

我要访问<Child2>来自父组件的状态。

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

如何实现？

Answer 1

你根本不应该这样做。在 react 中，信息应该始终从上到下流动。这样做的 react 方式是 lift state up to the parent并将值作为 Prop 向下传递。在您的 child 中，您有回调，这些回调也作为 child 调用的 Prop 传递，当值发生变化时(例如通过用户交互)，以便父级可以更新其状态:

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

Working example on codesandbox

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