Javascript 如何返回打开边栏而不在边栏组件中的子对象

我正在使用语义UI和语义UI来编写web应用程序。我正在处理的页面大部分是静态的，但我想用语义UI React代替下拉列表和侧栏，而不是使用jQuery。但是，菜单（下拉列表所在）和边栏是完全不同的组件，我不确定如何从菜单中打开边栏（不将所有页面内容嵌套在边栏推送器内容中）。谢谢

下面是我尝试做的一个例子：

import React, { Component } from 'react'
import { Sidebar, Segment, Button, Menu, Image, Icon, Header } from 'semantic-ui-react'

class SidebarBottomOverlay extends Component {
    constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
    this.toggleVisibility = this.toggleVisibility.bind(this);
  }

    toggleVisibility = () => this.setState({ visible: !this.state.visible })

  get MyButton() {
    return(
      <Button onClick={this.toggleVisibility}>Togglevis2</Button>
    )
  }

  render() {
    const { visible } = this.state
    return (
      <div>
        <Button onClick={this.toggleVisibility.bind(this)}>Toggle Visibility</Button>
        <Sidebar.Pushable as={Segment}>
          <Sidebar as={Menu} animation='overlay' direction='bottom' visible={visible} inverted>
            <Menu.Item name='home'>
              <Icon name='home' />
              Home
            </Menu.Item>
            <Menu.Item name='gamepad'>
              <Icon name='gamepad' />
              Games
            </Menu.Item>
            <Menu.Item name='camera'>
              <Icon name='camera' />
              Channels
            </Menu.Item>
          </Sidebar>
          <Sidebar.Pusher>
            <Segment basic>
              <Header as='h3'>Application Content</Header>
              <Image src='/assets/images/wireframe/paragraph.png' />
            </Segment>
          </Sidebar.Pusher>
        </Sidebar.Pushable>
      </div>
    )
  }
}

class MyApp extends Component {
  render () {
    return(
      <div>
      <SidebarBottomOverlay.MyButton />
      <SidebarBottomOverlay />
      </div>
      )
  }
}

export default MyApp

import React，{Component}来自“React”
从“语义ui”导入{边栏、段、按钮、菜单、图像、图标、标题}
类SidebarBottomOverlay扩展组件{
建造师（道具）{
超级（道具）；
此.state={
可见：假，
};
this.toggleVisibility=this.toggleVisibility.bind（this）；
}
toggleVisibility=（）=>this.setState（{visible:！this.state.visible}）
获取我的按钮（）{
返回(
切换开关2
)
}
render（）{
const{visible}=this.state
返回(
切换可见性
家
游戏
渠道
应用程序内容
)
}
}
类MyApp扩展组件{
渲染（）{
返回(
)
}
}
导出默认MyApp

我建议在呈现菜单和侧栏组件的父组件中保留侧栏的可见性状态。切换可见性方法也将移动到父零部件。然后，您可以根据需要将可见性状态和切换功能作为道具传递给每个子组件。

我建议在呈现菜单和侧栏组件的父组件中保留侧栏的可见性状态。切换可见性方法也将移动到父零部件。然后，您可以根据需要将可见性状态和切换功能作为道具传递给每个子组件。

谢谢！我试试这个！我将如何实现这一点？我有以下代码：

SidebarBottomOverlay

不需要保存任何状态，只需在其渲染方法中引用

this.props.visibility

而不是

this.state.visibility

。假设Sidebar.Pusher组件在我的SidebarBottomOverlay中，你认为我应该用React来渲染我的整个页面吗？谢谢！我试试这个！我将如何实现这一点？我有以下代码：

SidebarBottomOverlay

不需要保存任何状态，只需引用

this.props.visibility

而不是在其呈现方法中引用

this.state.visibility

。鉴于Sidebar.Pusher组件位于我的SidebarBottomOverlay中，您认为我应该用React呈现整个页面吗？