在另一个组件中反应 setState - JavaScript

在 React 中，组件之间的数据传递是非常常见的操作。当一个组件的状态(state)改变时，我们需要在其他组件中反映这个改变。为了实现这个目的，我们可以使用 props 和回调函数(callbacks)。

Props

通过传递 props，我们可以将状态(state)从一个组件传递到另一个组件。在下面的示例中，我们有一个父组件(ParentComponent)和一个子组件(ChildComponent)。父组件将状态(state)通过 props 传递给子组件。

class ChildComponent extends React.Component {
  render() {
    return (
      <div>{this.props.myState}</div>
    );
  }
}

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myState: "Initial State"
    };
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState({ myState: "New State" });
  }
  
  render() {
    return (
      <div>
        <ChildComponent myState={this.state.myState} />
        <button onClick={this.handleClick}>Click</button>
      </div>
    );
  }
}

在上面的示例中，当我们点击按钮时，父组件(ParentComponent)的状态(state)会改变，然后通过 props 传递给子组件(ChildComponent)。

回调函数

除了 props，我们还可以使用回调函数(callbacks)来传递状态(state)。在下面的示例中，我们有一个父组件(ParentComponent)、一个子组件(ChildComponent)，以及一个兄弟组件(SiblingComponent)。当子组件(ChildComponent)的状态(state)改变时，我们需要在兄弟组件(SiblingComponent)中反映这个改变。通过在父组件(ParentComponent)中定义一个回调函数(callback)，将回调函数(callback)传递给子组件(ChildComponent)，并在子组件(ChildComponent)中调用这个回调函数(callback)，我们可以实现这个目的。

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myState: "Initial State"
    };
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState({ myState: "New State" }, () => {
      this.props.myCallback(this.state.myState);
    });
  }
  
  render() {
    return (
      <button onClick={this.handleClick}>Click</button>
    );
  }
}

class SiblingComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      siblingState: ""
    };
    this.handleCallback = this.handleCallback.bind(this);
  }
  
  handleCallback(value) {
    this.setState({ siblingState: value });
  }
  
  render() {
    return (
      <div>{this.state.siblingState}</div>
    );
  }
}

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <ChildComponent myCallback={this.handleCallback} />
        <SiblingComponent />
      </div>
    );
  }
}

在上面的示例中，当我们在子组件(ChildComponent)中点击按钮时，子组件(ChildComponent)的状态(state)会改变，然后调用回调函数(callback)，将状态(state)传递给父组件(ParentComponent)。在父组件(ParentComponent)中，我们定义了一个回调函数(callback)，将回调函数(callback)传递给兄弟组件(SiblingComponent)，并在回调函数(callback)中更新兄弟组件(SiblingComponent)的状态(state)。