React JS изменяет стиль компонента при изменении состояния другого компонента

#javascript #reactjs #events

#javascript #reactjs #Мероприятия

Вопрос:

Я новичок в react js и пытаюсь создать приложение, используя его для отображения кратчайшего пути, поэтому я определил график как компонент класса, содержащий узлы, каждый узел также является компонентом класса, возвращающим объект {isVisited, parent, …}, и мои алгоритмы должны выполняться на этом графике. с другой стороны, я определил компоненты для просмотра узлов. Теперь проблема в том, что я хочу изменить стиль просматриваемых узлов, например, при посещении узлов графа. Примечание: Я пытался решить эту проблему, используя ссылку на div, который просматривает узел в узлах графика, но таким образом я делаю функциональную часть и часть просмотра пересекающимися, есть ли какой-либо другой способ, например, пользовательское событие, при котором запускается узел графика, и узлы просмотра прослушивают, или что-то еще решает проблему?

Ответ №1:

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

Например, это компонент кнопки, который при нажатии изменяет цвет фона другого компонента (окна):

 import React, {useState} from "react";

const Box = () => {
  const [backgroundColor, setBackgroundColor] = useState('red');
  return(
    <div style={{backgroundColor: backgroundColor}}>
      <Button setBackgroundColor={setBackgroundColor} />
    </div>
  );
}

const Button = ({setBackgroundColor}) => {
  return (
    <div onClick={()=>{setBackgroundColor('blue')}}>
      <p>Click me to change the color!</p>
    </div>
  );
}
  

Или, по крайней мере, что-то вроде этого…