Можем ли мы передать setState в качестве реквизита от одного компонента другому и изменить родительское состояние дочернего компонента в 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 и отправляю это как реквизит дочернему компоненту. Это изменит состояние родителя от дочернего. Это правильный путь?

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 не изменит состояние немедленно.

как документы сказал:

Думайте о setState () как о запросе, а не как о немедленной команде обновить компонент. Для лучшего восприятия производительности React может задержать его, а затем обновить несколько компонентов за один проход. реагировать не гарантирует, что изменения состояния будут применены немедленно.

setState () не всегда сразу обновляет компонент. Это может пакетировать или отложить обновление до позже. Таким образом, вам лучше управлять вызовом функции setState вместе, так как может иметь место конфликт с изменяющимся состоянием родителя. Не рекомендуется передавать эту функцию другому компоненту.

Инкапсуляция вызова функции setState в одном классе делает ваш код сильным.

Answer 3

Как сказал @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>
);

Теперь у вас есть полный контроль над состоянием Родителя у ребенка. Просто передайте объект для мелкого слияния в родительское состояние. В этом примере name в App изменится на Foo bar при нажатии кнопки.