如何在reactjs中访问组件中的组件函数

我有不同的jsx文件。我想访问Header.jsx函数中的Menu.jsx组件函数来打开菜单。我使用的材料界面也。在这里，我在Menu.jsx中有一个函数“handleToggle”，我想从Header.jsx中的“onlefticonbuttonotuchtap”按钮触发这个函数。如果需要维护任何层次结构，如何从任何其他组件访问组件内部功能

App.jsx

export default class App extends React.Component{
    render(){
        return(
            <main>
                <Menu/>
                <Header/>
                <Body/>
                <Footer/>
            </main>
        )
    }
}

导出默认类App扩展React.Component{
render（）{
返回(
)
}
}

Header.jsx

export default class Header extends BaseMUI{
    render(){
        return (
            <header>
                <AppBar
                    title="title"
                    onLeftIconButtonTouchTap={this.handleToggle}
                    iconClassNameRight="muidocs-icon-navigation-expand-more"
                />
            </header>
        )
    }
}

export default class Header扩展BaseMUI{
render（）{
返回(
)
}
}

Menu.jsx

export default class Menu extends BaseMUI{
    constructor(props) {
        super(props);
        this.state = {
            open: false
        };
    }

    handleToggle = () => this.setState({open: !this.state.open});

    handleClose = () => this.setState({open: false});

    componentDidMount(){
        console.log(this.refs);
    }

    render(){
        return (
            <nav>
                <RaisedButton
                label="Open Drawer"
                onTouchTap={this.handleToggle}/>

                <Drawer
                    docked={false}
                    width={200}
                    open={this.state.open}
                    ref="drawer"
                    onRequestChange={(open) => this.setState({open})}>
                        <MenuItem onTouchTap={this.handleClose}>Menu Item</MenuItem>
                        <MenuItem onTouchTap={this.handleClose}>Menu Item 2</MenuItem>
                </Drawer>
            </nav>
        )
    }
}

导出默认类菜单扩展BaseMUI{
建造师（道具）{
超级（道具）；
此.state={
开放：假
};
}
handleToggle=（）=>this.setState（{open:！this.state.open}）；
handleClose=（）=>this.setState（{open:false}）；
componentDidMount（）{
console.log（this.refs）；
}
render（）{
返回(
this.setState（{open}}>
菜单项
菜单项2
)
}
}

您需要创建父组件，将打开菜单的状态存储在那里，并更改菜单的道具-这里举一个例子，说明如何仅在react中实现它，而不使用Flux和Redux，如果您有许多相同的情况，那么使用它们会更合适

class MenuContainer extends React.Component {
  constructor(props) {
     super(props)
     this.state = { 
        isMenuOpen = false
     } 
  }

  shouldComponentUpdate(newProps, newState) {
     return newState.isMenuOpen != this.state.isMenuOpen 
  }

  openMenu = (isMenuOpen ) => {
      this.setState({isMenuOpen : isMenuOpen });
  }

  render () {
    return (
       <Header : isMenuOpen={this.state.isMenuOpen}
          openMenu= {this.openMenu}/>
       <Menu isMenuOpen={this.state.isMenuOpen})
    }
}

---

由于Header.jxs和Menu.jsx位于同一层次结构中，因此可以通过两种方式解决

1） 您可以从Header.jxs触发事件，并在Menu.jsx中侦听操作

---

2） 使用react-redux方式，点击启动操作，观察菜单中道具的变化。jsx

不使用redux

shouldComponentUpdate(newProps) {
   return this.props.isMenuOpen != newProps.isMenuOpen
}