this.setState()（react.Component 方法）如何访问他孩子的类状态？

Question

实际上，我正在学习 React JS，但是我很困惑，父母的类方法如何访问他孩子的类状态。 我在这个主题上搜索了很多，但是在面向对象的编程中，父类无法访问他孩子的属性（状态）。 但是在 React js 中 setState() 如何访问他孩子的类属性（状态）。 这可能是一个愚蠢的问题，请告诉我这是怎么发生的？

Answer 1

别担心，这是一个很好的问题。

props 是通过引用传递的！

以下是 StackOverflow 帖子中的一些很好的答案，可以更具体地回答您的问题。

在 reactjs 中，props 是按值传递还是按引用传递？

我认为我可以提供的一些潜在细微差别是 React 强调组合而不是继承。 您应该将其视为由子组件组成的父组件。 虽然子组件可以访问父状态，但它们不会继承它。

Answer 2

如果您想清除任何混淆，通过组件 API了解父子结构可能会有所帮助。 既然你提到了类组件，让我用同样的例子来说明。

您可以通过在 JSX 插入中定义属性来将道具从父级发送到子级 -

<Child uniqueProp="Text sent to Child" />

相反，访问 Parent 组件中的 Child 数据很棘手。 您必须按照以下步骤操作 -

1. 在父组件中定义一个回调函数来从子组件中获取数据。
2. 将父组件中的回调函数作为道具传递给子组件。
3. Child Component 使用 props 调用 Parent 回调函数。

例子 -

父组件

class Parent extends React.Component {      

  constructor(props) {
    super(props);
    this.state = {
      text: "Original Text"
    }
  }    

  handleCallback = (value) => {
    this.setState({ text: value })
  }    

  render() {
    return (
      <div>
        <Child changeText={this.handleCallback} />
        {this.state.text}
      </div>
    )
  }

}

子组件

class Child extends React.Component { 

  render() {
    return (
      <div>
        <button onClick={() => this.props.changeText("Data from child")}>
          Button
        </button>
      </div>
    )
  }

}

以这种方式设置的原因是因为 props 是通过引用传递的。 如果您选择更改父组件的传统state = {"something"}而不是setState({"something"}) ，该对象也将在子组件中被修改，但不会有重新渲染周期。 在手动刷新之前，用户不会看到 UI 更改。

并且当您使用setState更改父组件的状态（标准做法）时，将按预期触发重新渲染周期，并且子组件将反映 UI 更改。

注意：请注意，功能组件的使用现在几乎是事实。 在我看来，通过集成Hook和数据存储（例如Redux）使生活变得轻松。