REACT组件：在单击第A页中的DIV时突出显示第B中的一个DIV

Question

我正在尝试弄清楚以下内容：

如果：addCanvas按钮在dashboard.js（第一个网页）中单击；然后：默认情况下突出显示了Toppanel.js中的Canvasmenu div（第二页的子组件）。

单击dashboard.js中的AddCanvas，不仅将重定向到canvas.js（不同的父组件）。它还应该在toppanel.js（canvas.js的子组件）中突出显示Canvasmenu div。因此，它们是两个不同的网页，前者的动作应该对后者产生影响。

我已经从事IF-Else语句工作，但无济于事（目前似乎没有意义...）。

1. dashboard.js中的addcanvas div：

    从“反应”中导入react;
    导入“ ./dashboard.css”;
    从“ ../ assets/icon_adddefault.png”导入Addicon;
    从“ ../ Assets/icon_canvas.png”导入IconCanvas;
   
    从“ react-router-dom”导入{link};
   
    功能仪表板（）{
    返回（
        ＆lt; div ID =“ dashboard”＆gt;
   
            ＆lt; input className =“ searchcanvas” type =“ search”占位符=“搜索语音canvas”＆gt;＆lt;/input＆gt;
   
            ＆lt;链接到=“/canvas”＆gt; 
                ＆lt; div className =“ addCanvas”＆gt; //单击时
                    ＆lt; img className =“ addicon” src = {addicon}/＆gt;
                    ＆lt; p＆gt;新帆布＆lt;/p＆gt;
                    ＆lt; img className =“ iconcanvas” src = {iconcanvas}＆gt;＆lt;/img＆gt;
                ＆lt;/div＆gt;
            ＆lt;/link＆gt;
   
        ＆lt;/div＆gt;
    ）；
   }
    

2. toppanel.js中的canvasmenu div，我默认要突出显示：

    从“反应”中导入react;
    导入“ ./toppanel.css”;
   
    类Toppanel扩展了React.comPonent {
        构造函数（props）{
            超级（道具）；
        } 使成为（） {
            返回（
   
             ＆lt; div ID =“ ToppanelStyle”＆gt;
   
             ＆lt; div className =“ toptitle”＆gt;＆lt;/div＆gt;
   
             ＆lt; div className =“ topmenu”＆gt;
               ＆lt; div className =“ Canvasmenu” //这需要突出显示
             ＆lt;/div＆gt;
        ＆lt;/div＆gt;
      ）；
     }
    }
    

Answer 1

您可以在链接请参阅此问题＆amp;解决方案。使用此设置的方式简单的解决方案是在创建Toppanel时添加一个Prop（属性）：

<TopPanel isHighlighted={clickedYesNo} />

或者

class CanvasPage extends Componet {
  ...
  const props = { 
    // any other needed props
    isHighlighted: true
  }

  render() { 
    ...
    return {TopPanel(props)};
  }
}

随后使用组合中的Ishighighlight opt prop：

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 。使用上下文提供商＆amp;像Usestate这样的挂钩将需要您更改为功能组件而不是类。国家管理是一个大主题＆amp;如果选择API或挂钩作为解决方案，则应该找到很多教程。