如何訪問組件中的組件函數reactjs

我有不同的jsx文件。我想在Header.jsx函數中訪問Menu.jsx組件函數來打開菜單。我也使用Material-UI。所以在這裏我在Menu.jsx中有一個「handleToggle」函數，我想通過Header.jsx中的一個按鈕「onLeftIconButtonTouchTap」觸發這個函數。我如何從其他任何組件訪問組件內部函數，我是否需要維護任何層次結構？如何訪問組件中的組件函數reactjs

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> 
     ) 
    } 
}

來源

2017-02-02 Krishna Babu

您需要創建父組件，打開菜單的商店有狀態和變化菜單的道具 - 在這裏舉一個例子，如何在沒有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}) 
    } 
}

，然後在菜單組件

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

來源

2017-02-02 06:51:34

既然你Header.jxs和Menu.jsx在同一層次，您可以通過兩種方式解決......

1）你可以從Header.jxs中觸發一個事件並在Menu.jsx中偵聽動作

2）使用react-redux方法，在點擊時觸發動作並在Menu.jsx中觀察道具的變化

來源

2017-02-03 06:24:02

不使用redux –

如何訪問組件中的組件函數reactjs

回答

相關問題