反应隐藏的导航菜单答案

【问题标题】：React hidden navigation menu反应隐藏的导航菜单
【发布时间】：2017-08-15 22:30:14
【问题描述】：

我目前正在使用 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 组件中对其进行操作。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

我喜欢保持简单：

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

【讨论】：

【解决方案2】：

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

 <Menu toggleMenu={this.toggleMenu} />

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

【讨论】：

【解决方案3】：

如果你使用 ReactJs，你应该考虑以下模式：

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

第 3 步。

{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/

【讨论】：