此.setState（）（react.Component方法）如何访问其子级的类状态？

Question

事实上，我正在学习如何反应JS，但我不清楚家长的类方法如何能够访问孩子的类状态。我在这个主题上搜索了很多，但在面向对象编程中，父类无法访问其子类的属性（状态）。但在react js中，setState（）如何访问其子级的类属性（state）。这可能是个愚蠢的问题请告诉我它是怎么发生的？

Answer 1

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

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

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

相反，在父组件中访问子数据很棘手。你必须按照这些步骤-

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

范例-

父组件

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

}

之所以这样设置，是因为道具是通过引用传递的。如果您选择更改父对象的状态state={“something”}而不是setState（{“something”}），则该对象也将在子组件中修改，但不会有重新渲染周期。在手动刷新之前，用户不会看到UI更改。

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

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

Answer 2

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

道具是通过引用传递的！

这里有一些来自StackOverflow帖子的很好的答案，可以更具体地回答你的问题。

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

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