#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>
);
}
Или, по крайней мере, что-то вроде этого…