Question

我有不同的jsx文件。我想在Header.jsx函数中访问Menu.jsx组件功能来打开菜单。我也在使用Material-UI。所以我在这里有一个功能＆＃34; handleToggle＆＃34;在Menu.jsx中，我想从按钮＆＃34; onLeftIconButtonTouchTap＆＃34;触发此功能。这在Header.jsx中可用。如果我需要维护任何层次结构，如何从任何其他组件访问组件内部函数？

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

然后在菜单组件中

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

Answer 2

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

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

2）使用react-redux方式，在Click.jsx中点击并观察道具变化时触发动作

如何在reactjs中访问组件中的组件功能

2 个答案: