React组件:当点击页面a中的div时，突出显示页面B中的一个div

Question

我正试图弄清楚以下内容：

如果：在Dashboard.js(第一个网页(中单击addCanvas按钮；然后：TopPanel.js中的canvasMenudiv默认高亮显示(第二页中的子组件(。

在Dashboard.js中单击addCanvas不仅会重定向到Canvas.js(一个不同的父组件(。它还应该突出显示TopPanel.js中的canvasMenudiv(Canvas.js的子组件(。因此，它们是两个不同的网页，前者中的操作应该会对后者产生影响。

我已经做了if else语句，但没有用(现在似乎没有意义…(。

1. Dashboard.js:中的addCanvasdiv

   import React from "react";
   import "./Dashboard.css";
   import AddIcon from "../assets/icon_AddDefault.png";
   import IconCanvas from "../assets/icon_Canvas.png";
   import { Link } from "react-router-dom";
   function Dashboard() {
   return(
   <div id="dashboard">
   <input className="searchCanvas" type="search" placeholder="Search speech canvas"></input>
   <Link to="/canvas"> 
   <div className="addCanvas"> //when this is clicked
   <img className="addIcon" src={AddIcon}/>
   <p>New Canvas</p>
   <img className="iconCanvas" src={IconCanvas}></img>
   </div>
   </Link>
   </div>
   );
   }
   

2. 下面TopPanel.js中的canvasMenudiv，我想在默认情况下突出显示它：

   import React from "react";
   import "./TopPanel.css";
   class TopPanel extends React.Component {
   constructor(props) {
   super(props);
   } render() {
   return(
   <div id="topPanelStyle">
   <div className="topTitle"></div>
   <div className="topMenu">
   <div className="canvasMenu"><p>Canvas</p></div> //this needs to be highlighted
   </div>
   </div>
   );
   }
   }
   

Answer 1

您可以在链接中的中传递a参数，请参阅此问题&解决方案。这种设置的方式——简单的解决方案是在创建TopPanel时添加一个道具(属性(：

<TopPanel isHighlighted={clickedYesNo} />

或

class CanvasPage extends Componet {
...
const props = { 
// any other needed props
isHighlighted: true
}
render() { 
...
return {TopPanel(props)};
}
}

然后在你的组件中使用isHighlighted道具：

class TopPanel extends React.Component {
constructor(props) {
super(props);
} 
render() {
return(
<div id="topPanelStyle">
<div className="topTitle"></div>
<div className="topMenu">
<div className={props.isHighlighted ? "canvasMenu-highlighted" : "canvasMenu"}>
<p>Canvas</p>
</div>
</div>
</div>
);
}
}

其他方法是使用状态管理上下文提供程序或类似Redux或Recoil的API。使用上下文提供程序&像useState这样的钩子会要求您切换到功能组件而不是类。国家管理是一个大课题；如果你选择一个API或钩子作为解决方案，你应该找到很多教程。