はどのようにreactjs

Question

私は別のJSX files.Iは、メニューを開くためにHeader.jsx機能でMenu.jsxコンポーネントの機能にアクセスしたい持っているのコンポーネントで構成要素の機能にアクセスします。私はMaterial-UIも使用しています。そこで、私はMenu.jsxに "handleToggle"という関数を持っており、この関数をHeader.jsxで利用できるボタン "onLeftIconButtonTouchTap"からトリガーしたいと思います。階層を維持する必要がある場合、他のコンポーネントからコンポーネントの内部関数にアクセスするにはどうすればよいですか？

App.jsx

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

Header.jsx

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

あなたが親コンポーネントを作成する必要が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> 
     ) 
    } 
} 

Answer 1

、そこにメニューを開くの状態、および変更を保存しますメニューの小道具 - この例では、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が同じ階層にあるので、あなたのメニューコンポーネントに

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

Answer 2

は、あなたは2通りの方法で解決することができます...

1）あなたはHeader.jxsからイベントを発生させ、Menu.jsxのアクションを聞くことができます

2）react-redux wayを使用して、クリックして、Menu.jsx