Как в React изменить состояние одного компонента, когда происходит событие в другом компоненте?

Как я могу изменить состояние компонента "Board" из компонента "ResetButton"?
  • 21 сентября 2023 г. 12:57
Ответы на вопрос 2
В React для изменения состояния одного компонента, когда происходит событие в другом компоненте, вы можете использовать подход, называемый "поднятие состояния" (lifting state up).

Чтобы изменить состояние компонента "Board" из компонента "ResetButton", вам необходимо определить общий родительский компонент, который будет содержать состояние, которое нужно изменить.

Примерно такой код может выглядеть ваша реализация:

```javascript
import React, { useState } from "react";

const App = () => {
  const [boardState, setBoardState] = useState("initialState");

  // Функция, которая обновляет состояние компонента "Board"
  const handleReset = () => {
    setBoardState("newState");
  };

  return (
    <div>
      <Board boardState={boardState} />
      <ResetButton onReset={handleReset} />
    </div>
  );
};

const Board = ({ boardState }) => {
  return <div>Board: {boardState}</div>;
};

const ResetButton = ({ onReset }) => {
  return <button onClick={onReset}>Reset</button>;
};
```

В этом примере родительский компонент `App` содержит состояние `boardState`, которое передается в компонент `Board` в качестве пропса. Компонент `ResetButton` получает функцию `handleReset` через пропс `onReset`, и при клике на кнопку вызывает эту функцию.

Когда вы нажимаете кнопку "Reset", вызывается функция `handleReset`, которая обновляет состояние `boardState` компонента `App`, и затем это новое состояние передается `Board` через пропс `boardState`.

Таким образом, при изменении состояния в компоненте `ResetButton`, состояние компонента `Board` также будет обновлено.
Можно передавать функцию как свойство между компонентами, но в данном случае это не вышло. Вместо этого можно передавать свойство id по структуре приложения: App(key, id) -> Board -> Row -> Section -> ... -> SideBlock(id) -> ResetButton(id). При клике на кнопку ResetButton вызывается функция, которая изменяет id и перерисовывает компоненты. Возможно, это решение не самое идеальное, и в будущем нужно будет еще раз подумать о использовании функций, но пока это работает.
Похожие вопросы