时间戳

首页 > 解决方案 > React JS 在更改另一个组件的状态时更改组件样式

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

问题描述

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

标签： javascriptreactjsevents

解决方案

如果您希望组件在不同组件更改状态时执行操作（例如更改样式），则需要以某种方式将该状态作为道具添加到第一个组件。

例如，这是一个按钮组件，当按下它时，将更改不同组件（框）的背景颜色：

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

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

推荐阅读