我们可以将 setState 作为 props 从一个组件传递到另一个组件并在 React 中从子组件更改父状态吗？

Question

 class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
    this.setState=this.setState.bind(this)
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
        </p>
        <Child {...this}/>
      </div>
    );
  }
}

child Component
var Child=(self)=>{
  return(
    <button  onClick={()=>{
      self .setState({
        name:"viswa"
      })
    }}>Click </button>
  )

这里我绑定了 setState 函数并将其作为 props 发送给子组件。这将改变父组件的状态。这是正确的方法吗？

Answer 1

但这比传递函数简单。如果我想更改许多状态更改。与传递函数相比，这将是一种简单快捷的方式吗？

执行此操作的正确方法与您的一样简单，并且不违反最佳实践：

class App extends Component {
  state = {
      name: 'React',
  };

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
        </p>
        <Child onClick={() => this.setState({name: 'viswa'})}/>
      </div>
    );
  }
}

const Child=({onClick})=>(
    <button onClick={onClick}>Click</button>
);

Answer 2

您不应该直接传递 setState，因为 setState 函数不会立即更改状态。

正如documents所说：

将 setState() 视为请求而不是立即命令 更新组件。为了获得更好的感知性能，React 可能 延迟它，然后一次更新几个组件。反应 不保证立即应用状态更改。

setState() 并不总是立即更新组件。它可能会批量更新或将更新推迟到以后。因此，您最好一起管理 setState 函数的调用，因为可能存在变异父状态的竞争。不建议将此函数传递给其他组件。

将setState函数的调用封装在一个类中，让代码更强大。

Answer 3

我猜在功能组件中可以将你的 setState 发送给子组件并更改它们的父状态，但不能在类基组件中

Answer 4

正如@yBrodsky 所说，您应该传递一个确实会改变状态的函数。这是一个例子：

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
    this.update=this.update.bind(this);
  }

  update(nextState) {
    this.setState(nextState);
  }

  render() {
    return (
      <Child updateParent={this.update} />
    );
  }
}

const Child = ({updateParent}) => (
  <button onClick={() => updateParent({name: 'Foo bar'})}>Click</button>
);

您现在可以完全控制子项中父项的状态。只需将要浅合并到父状态的对象传递。在此示例中，App 中的 name 在按钮单击时将更改为 Foo bar。