时间戳

首页 > 解决方案 > 我们可以将 setState 作为 props 从一个组件传递到另一个组件，并在 React 中从子组件更改父状态吗？

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

问题描述

 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 函数并将其作为道具发送给子组件。这将从子组件更改父组件的状态。这是正确的方法吗？

标签： javascriptreactjsfunctionsetstatereact-props

解决方案

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

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

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

推荐阅读