So geben Sie ReactJS Kind zurück, das die Seitenleiste nicht innerhalb der Sidebar-Komponente öffnet

Question

Ich verwende Semantic-UI-React und Semantic-UI, um eine Webanwendung zu schreiben. Die Seite, an der ich gerade arbeite, ist größtenteils statisch, aber ich möchte das Dropdown und die Seitenleiste durch Semantic-UI-React ersetzen, anstatt jQuery zu verwenden. Das Menü (in dem sich das Dropdown-Menü befindet) und die Seitenleiste sind jedoch völlig unterschiedliche Komponenten, und ich bin mir nicht sicher, wie ich die Seitenleiste über mein Menü öffne (ohne den gesamten Inhalt meiner Seite in den Sidebar-Pusher-Inhalt zu verschachteln). Vielen Dank!

Hier ist ein Beispiel dafür, was ich zu tun habe versucht:

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

Ich würde vorschlagen Sidebar des Sichtbarkeitsstatus in der übergeordneten Komponente hält, die sowohl das Menü und die Sidebar Komponenten macht. Ihre Toggle-Sichtbarkeitsmethode würde auch zur übergeordneten Komponente verschoben. Sie können dann den Sichtbarkeitsstatus und die Umschaltfunktion nach Bedarf an jede untergeordnete Komponente als Requisiten übergeben.