反应隐藏的导航菜单

Question

目前，我正在使用ReactJS（我是一个初学者）。 我想要做的是在站点导航中单击链接时显示/隐藏菜单组件。 菜单被构建为位于组件（标题）中的组件。

用户单击菜单按钮，然后切换要显示或隐藏的菜单，但是我在确定显示和隐藏菜单组件的逻辑应该存在的位置时遇到了问题，我基本上想添加并隐藏将一个类删除到菜单组件以显示或隐藏它。

我的登录和注册表单也有类似的显示/隐藏方法，但是这些显示/隐藏类是在标头组件而不是子组件中添加的，到目前为止，这是我的标头组件JS。

import React, { Component } from 'react'

从'prop-types'导入PropTypes

从'./menu'导入菜单； 从“ ../Login”导入LoginForm； 从“ ../Register”导入RegisterForm；

导出默认类探索扩展组件{

constructor(props) {
    super(props);
    this.state = {
        loginMenuVisible : false,
        registerMenuVisible : false,
        mainMenuVisible : false
    };
    console.log(this.state);
    //this.triggerMenu = this.triggerMenu.bind(this);
}

render() {
    return (
        <div className="site__navigation">
            <Menu />
            <header className="site__header">

                <a href="/"><img src="img/logo-full-color.png" alt="meatFree" /></a>

                <ul className="header__navigation">
                    <li className="header__navigation__item">
                        <a href="/register"  onClick={this.toggleMenu.bind(this, 'register')}>Register</a>
                        <ul className={this.state.registerMenuVisible ? "dropdown visible" : "dropdown"}>
                            <li>
                                <LoginForm />
                            </li>
                        </ul>
                    </li>
                    <li className="header__navigation__item">
                        <a href="#" onClick={this.toggleMenu.bind(this, 'login')}>Login</a>
                        <ul className={this.state.loginMenuVisible ? "dropdown visible" : "dropdown"}>
                            <li>
                                <LoginForm />
                            </li>
                        </ul>
                    </li>
                    <li className="header__navigation__item">
                        <a href="" className="nav__toggle">
                            Menu
                        </a>
                    </li>
                </ul>

            </header>
        </div>
    );
}

toggleMenu(type, e) {
    e.preventDefault();
    console.log(type);
    switch(type) {
        case 'login':
            if(this.state.loginMenuVisible) {
                this.setState({loginMenuVisible : false});
            } else {
                this.setState({
                    registerMenuVisible : false,
                    loginMenuVisible :  true
                });
            }
        break;

        case 'register':
            if(this.state.registerMenuVisible) {
                this.setState({registerMenu : false});
            } else {
                this.setState({
                    registerMenuVisible : true
                });
            }
        break;

        case 'menu':
            this.setState({mainMenuVisible : true });
    }
}

}

如您所见，我有一个名为mainMenuVisible的元素，我希望能够在Menu组件中进行操作。

Answer 1

如果使用ReactJ，则应考虑以下模式：

1.专门设置一个状态以显示/隐藏菜单

2.创建一个可以切换状态的函数

3.为组件菜单添加条件渲染

这是完成代码的方法：

第1步。

constructor(props) {
    super(props);
    this.state = {
        isComponenetMenuVisisble : false, // by default to disable it
    };
}

第2步。

toggleComponentMenu = () => {
    const isComponenetMenuVisisble = !this.state.isComponenetMenuVisisble;
    this.setState({ isComponenetMenuVisisble });
}

第三步

{this.state.isComponenetMenuVisisble && <Menu />}  
// if isComponenetMenuVisisble is true render <Menu />

然后您可以添加事件处理程序，如下所示

<div className="your-element" onClick={this.toggleComponentMenu}>
     ... your stuff
</div>

在上面的代码中突出显示的一个好地方是，我在步骤2中使用的是方法而不是函数。当使用方法而不是函数时，将不需要在事件处理程序上绑定该函数，因为此上下文将是类本身。 有关更多详细信息，请参见http://blog.andrewray.me/react-es6-autobinding-and-createclass/

Answer 2

我喜欢保持简单：

export default class Example extends Component {
    constructor(){
        super(props)
        this.state = {
            showMenu: false
        }

        this.menuShowToggle = this.menuShowToggle.bind(this);
    }

    menuShowToggle = () => {
        this.setState({showMenu: !this.state.showMenu})
    }

    render = () => { 
        return (
            <div>
                <div  className={this.state.showMenu ? 'showMenu': 'hideMenu'}>Hidden Menu</div>
                <button type="button" onClick={this.menuShowToggle} value="toggle" />
            </div>
        )
    }
}

Answer 3

要使用当前设置实现此目的，可以将toggleMenu()函数作为道具传递给渲染的Menu组件

 <Menu toggleMenu={this.toggleMenu} />

然后，在Menu组件内，您可以在点击处理程序中调用toggleMenu() ，并将“ menu”作为类型传递。