连接一个没有父子连接的反应钩子组件答案

【问题标题】：connect a react hooks components that is not have a parent and child connection连接一个没有父子连接的反应钩子组件
【发布时间】：2021-05-27 13:06:10
【问题描述】：

我想连接一个没有父子连接的反应组件，但我想显示和隐藏另一个组件的子组件。

这里是代码：

import React, { useEffect } from "react";
import DashSidebar from "./DashSidebar";
import Catalog from "./components/catalog";

function Dashboard() {
  useEffect(() => {
    document.title = "Home";
  }, []);

  return (
    <div id="l-dashboard">
      <DashSidebar />
      <Catalog />
    </div>
  );
}

export default Dashboard;

我在DashSidebar 中有一个按钮，我想显示和隐藏Catalog

为什么我不让它成为父母和孩子？

因为DashSidebar是一个固定位置，它是左侧的侧面板，而我想在右侧显示和隐藏内容..

【问题讨论】：

你在使用 react 路由器吗？
是的，我在这个组件的父级中使用它
可以用react router来完成吗？如果可以的话，你可以在文档上放一个链接
您可以使用Context API。

标签： javascript reactjs show-hide

【解决方案1】：

由于您使用的是react-router，因此可以通过以下步骤完成。

使用Link 组件将您的目录列表包装在侧栏中。
现在在Route 的帮助下呈现右侧的目录。

请参考沙盒

React SideBar Example

【讨论】：

那么如何将它连接到目录 A、目录 B 等？
我假设目录 A 和目录 B 您指的是侧栏中的项目？ .那是对的吗？ .您需要使用 Link Component 包装 Catalog 项目。这样当您单击 catalogA 时，您的路线将更改为 ..../catalogA 。当您单击 catalogB 时，您的路线将更改为 ..../catalogB 。现在在 <Catalog /> 组件中，您可以添加一个 <Route path="/catalogA" component={CatalogAComponent} /> 。
为了确认一些东西应该通过链接到侧边栏吗？
import { BrowserRouter, Switch, Route, Link } from "react-router-dom"; const SideBar = () => { return ( <> <SideBar /> </> ); };
不，它不需要，您可以粘贴有关如何呈现catalogA、catalogB 等的代码吗？它很难帮助假设。

【解决方案2】：

Lift the state 通过在 DashSidebar 的 props 中传递一个函数来更改 Dashboard 状态中的变量，从而了解 Catalog 对 Dashboard 组件的可见性。在 Catalog 的 props 中传递变量来控制它的可见性。

【讨论】：