Реагировать - Изменить состояние в дочернем компоненте от другого дочернего компонента

Question

Мне нужно изменить состояние одного дочернего компонента при нажатии кнопки в другом дочернем компоненте. Оба дочерних элемента имеют один и тот же родительский компонент.

import React from "react":
import A from "...";
import B from "...";

class App extends React.Component {
    render() {
        <div>
            <A />
            <B /> 
        </div>
    }
}

В этом примере, когда нажата кнопка в компоненте A, состояние в компоненте B необходимо изменить.

Answer 1

Это приложение звучит как идеальный вариант использования «Подъем состояния вверх», то есть удержание основного состояния в родительском компоненте. Затем вы просто передаете обработчики (чтобы изменить родительское состояние) компоненту A (он становится обработчиком onClick кнопки), а затем передаете состояние, которое вы хотите показать компоненту B.

Когда вы нажимаете кнопку setState вызывается в родительском компоненте, который автоматически повторно отображает все дочерние элементы, чьи реквизиты меняются (включая компонент B).

Вот более подробная информация: https://reactjs.org/docs/lifting-state-up.html

РЕДАКТИРОВАТЬ: ответ ниже напомнил мне, что я, вероятно, должен добавить некоторый код для иллюстрации - но я сделал несколько изменений, которые упрощают вещи.

import React, {useState} from "react":
import A from "...";
import B from "...";

const App = () => {
    const [show, setShow] = useState(false);

    function handleToggle() {
      // Decouple the implementation of the parent state change from the child
      // Pass a function to change the state (async/batching reasons)
      setShow(show => !show);
    }

    return (
        <div>
            <A show={show} onToggle={handleToggle} />
            <B show={show} onToggle={handleToggle} /> 
        </div>
    )
}

const A = ({show, onToggle}) => (
  <div>
    <p>show: {show}</p>
    <button onClick={onToggle}>
      toggle
    </button>
  </div>
)

const B = ({show, onToggle}) => (
  <div>
    <p>show: {show}</p>
    <button onClick={onToggle}>
      toggle
    </button>
  </div>
)

Так что в основном нам все равно, как состояние у родителя это изменилось. Мы просто знаем, что при нажатии кнопки в дочернем компоненте мы хотим вызвать это изменение. Поэтому все, что нам действительно нужно сделать, - это вызвать функцию, переданную через реквизит - нам не нужно передавать никаких параметров.

Затем родитель будет обрабатывать любые щелчки внутри функции handleToggle, и вы можете изменить эту реализацию в будущем, чтобы ребенок ничего не знал. Возможно, вы захотите перейти на использование mobx для обработки состояния или запустить другой код перед окончательным изменением состояния. Так как оба развязаны, у вас все хорошо! Я также настроил setShow для использования функции (преимущества описаны здесь: https://reactjs.org/docs/state-and-lifecycle.html#state -updates-may-be-be-asynchronous ).

Answer 2

Дополнение к ответу выше:

import React, {useState} from "react":
import A from "...";
import B from "...";

const App = () => {
    const [show, setShow] = useState(false)
    return (
        <div>
            <A show={show} setShow={setShow} />
            <B show={show} setShow={setShow} /> 
        </div>
    )
}

const A = ({show, setShow}) => (
  <div>
    <p>show: {show}</p>
    <button onClick={() => setShow(!show)}>
      toggle
    </button>
  </div>
)

const B = ({show, setShow}) => (
  <div>
    <p>show: {show}</p>
    <button onClick={() => setShow(!show)}>
      toggle
    </button>
  </div>
)