Question

我正在使用Semantic-UI-React和Semantic-UI来编写Web应用程序。我正在处理的页面主要是静态的，但我想用Semantic-UI-React替换Dropdown和Sidebar，而不是使用jQuery。但是，菜单（Dropdown所在的）和补充工具栏是完全不同的组件，我不知道如何从我的菜单中打开侧边栏（没有将我的所有页面内容嵌套在补充工具栏推送器内容中）。谢谢！

以下是我正在尝试做的一个例子：

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

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

如何返回不在侧栏组件内打开侧栏的ReactJS子项

1 个答案: