Question

我是新来响应js的人，我正尝试使用它来显示最短的时间，因此我将图定义为包含节点的类组件，每个节点也是一个类组件，返回一个对象{isVisited，父级，...}，并且我的算法必须在此图上运行。另一方面，我定义了用于查看节点的组件。现在的问题是，例如，当我访问图节点时，我想重新设置查看的节点的样式。注意：我尝试通过使用对div的引用来解决此问题，该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>
  );
}

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

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

1 个答案: