bootstrap React JS 全局

Question

我是 React JS 的新手，遇到了一个非常基本的问题。我正在使用 Bootstrap 'Offcanvas' 组件，但问题是切换它的按钮是 header 而菜单本身在不同的文件中。我不知道如何定义全局常量来管理它

CONST

 const [showSidebar, setShowSidebar] = useState(false);
 const handleSidebarClose = () => setShowSidebar(false);
 const handleSidebarShow = () => setShowSidebar(true);

HEADER.JS

<Button variant="primary" onClick={handleSidebarShow}>Show Meny</Button>

SIDEBAR.JS

<Offcanvas show={showSidebar} onHide={handleSidebarClose}>        
    <Offcanvas.Body>
      Some text as placeholder. In real life you can have the elements you
      have chosen. Like, text, images, lists, etc.
    </Offcanvas.Body>
  </Offcanvas>

我应该将这些常量放在哪里并使它们成为全局变量？

Answer 1

你必须把其他几个组件需要的状态放在它们上面。这叫做“解除状态”。然后通过 props 将状态 or/and 你的函数交给下面的组件。例如：

将状态置于 App.js
在 App.js
为 Header 和 Sidebar 提供适当的属性 showSidebar、handleSidebarClose、handleSidebarShow

请查看以下沙箱以获取工作示例：https://codesandbox.io/s/vigilant-mopsa-5f6us9

bootstrap React JS 全局

bootstrap react JS global

react-bootstrap