사이드 바를 열지 않는 ReactJS 자식 구성 요소 내 사이드 ​​바 구성 요소 내에서

Question

Semantic-UI-React 및 Semantic-UI를 사용하여 웹 응용 프로그램을 작성하고 있습니다. 내가 작업하고있는 페이지는 대부분 정적이지만 jQuery를 사용하는 대신 Semantic-UI-React와 함께 드롭 다운과 사이드 바를 대체하려고합니다. 그러나 메뉴 (드롭 다운이 있음)와 사이드 바는 완전히 다른 구성 요소이며 내 메뉴에서 사이드 바를 열 방법을 모르겠습니다 (사이드 바 푸시 콘텐츠에 내 페이지 콘텐츠를 모두 중첩하지 않음). 감사!

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

나는 메뉴와 사이드 바 두 구성 요소를 렌더링하는 부모 구성 요소에서 사이드 바의 가시성 상태를 유지 좋을 것 :

는 여기에 내가 할 노력하고있어의 예입니다. 토글 표시 여부 메서드는 부모 구성 요소로 이동합니다. 그런 다음 필요에 따라 가시성 상태를 전환하고 각 하위 구성 요소에 기능을 토글 할 수 있습니다.