javascript - 如何返回不在 Sidebar 组件内打开侧边栏的 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

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