React JS 在更改另一个组件的状态时更改组件样式

Question

我是 react js 的新手，我正在尝试使用它来构建一个应用程序来显示最短的浴缸，因此我将图形定义为包含节点的类组件，每个节点也是一个类组件，返回一个对象 {isVisited, parent, . ..}，我的算法必须在这个图上运行。 另一方面，我定义了组件来查看节点。 现在的问题是，例如，当图形节点被访问时，我想重新设置查看节点的样式。 注意：我试图通过使用对查看图形节点中的节点的 div 的引用来解决这个问题，但是这样我使功能部分和视图部分相交，是否还有其他方式像自定义事件一样图节点开始是和视图节点侦听，还是其他解决问题的方法？

Answer 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>
  );
}

或者至少是这样的......