将 setState 传递给子级 - JavaScript

在 React 中，状态（state）是组件的重要组成部分。当状态更新时，组件会重新渲染并更新相关的 DOM 元素。在某些情况下，我们希望更新子组件的状态（子组件可能位于组件层次结构中的任意深度），这时候就可以将 setState 传递给子组件。

传递 setState 到子组件

要将 setState 传递给子组件，我们需要通过 props 将 setState 传递到子组件并在子组件内部调用它。以下是示例代码：

import React, { Component } from 'react';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  incrementCount = () => {
    this.setState({
      count: this.state.count + 1
    });
  }

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <ChildComponent incrementCount={this.incrementCount} />
      </div>
    );
  }
}

function ChildComponent(props) {
  return (
    <div>
      <h2>Child Component</h2>
      <button onClick={props.incrementCount}>Increment Count</button>
    </div>
  );
}

在上面的代码中，ParentComponent 维护一个 count 状态，然后通过 props 传递 incrementCount 函数到 ChildComponent 中。当用户单击 button 元素时，incrementCount 函数会在 ParentComponent 中被调用以更新 count 状态。

使用 setState 更新子组件的状态

在某些情况下，我们希望在 ParentComponent 中更新 count 状态后，能够同时更新 ChildComponent 的状态。这时候，我们可以将 count 状态作为 props 传递到 ChildComponent 中，并在 ChildComponent 中使用 componentDidUpdate 钩子函数实现：

import React, { Component } from 'react';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  incrementCount = () => {
    this.setState({
      count: this.state.count + 1
    });
  }

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
        <ChildComponent count={this.state.count} />
        <button onClick={this.incrementCount}>Increment Count</button>
      </div>
    );
  }
}

class ChildComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      localCount: 0
    };
  }

  componentDidUpdate(prevProps) {
    if (prevProps.count !== this.props.count) {
      this.setState({
        localCount: this.props.count
      });
    }
  }

  render() {
    return (
      <div>
        <h2>Child Component</h2>
        <p>Count: {this.state.localCount}</p>
      </div>
    );
  }
}

在上面的代码中，ParentComponent 将 count 状态通过 props 传递到 ChildComponent 中。在 ChildComponent 中，我们使用 componentDidUpdate 钩子函数监听 props 的变化，并在变化时使用 setState 更新 localCount 状态，从而达到更新子组件状态的目的。