如何 return 不在边栏组件内打开边栏的 ReactJS 子项

Question

我正在使用 Semantic-UI-React 和 Semantic-UI 编写 Web 应用程序。我正在处理的页面大部分是静态的，但我想用 Semantic-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

Answer 1

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

如何 return 不在边栏组件内打开边栏的 ReactJS 子项

How to return ReactJS child that opens sidebar not within Sidebar component

javascript

reactjs

semantic-ui

semantic-ui-react