Question

此刻我正在与ReactJS合作（我非常初学者）。我想要做的是在站点导航中单击链接时显示/隐藏菜单组件。该菜单正在构建为组件（标题）中的组件。

用户单击菜单按钮，然后切换菜单显示或隐藏，但是我遇到问题，显示和隐藏菜单组件的逻辑应该显示隐藏相对简单我基本上想要添加和删除菜单组件的类以显示或隐藏它。

我有一个类似的show / hide为我的登录和注册表单工作，但是这些的show和hide类被添加到header组件而不是子组件中，这是我的头组件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

如果您使用的是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/

中可以找到更多有关此内容的详细信息

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()并传入“菜单”。作为类型。

反应隐藏的导航菜单

3 个答案: