如何访问reactjs中的组件中的组件函数(How to access component function in a component in reactjs)

我有不同的jsx文件。我想在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> ) } }

I have different jsx files.I want to access Menu.jsx component function in Header.jsx function to open menu. I am using Material-UI also. So Here I have a function "handleToggle" in Menu.jsx and I want to trigger this function from a button "onLeftIconButtonTouchTap" which is available in Header.jsx. How can I access component internal function from any other component, should I need to maintain any hierarchy?

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

最满意答案

你需要创建父组件，在那里存储开启菜单的状态，并且改变菜单的道具 - 这里举一个例子，如何在没有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 }

You need to create parent component, store there state of opening menu, and change props of the menu - here an example, how it can be implemented in only react, without Flux and Redux, will be more right to use them, if you have many idential situations.

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

And then in your menu component

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

更多推荐