React - 从另一个组件的 onClick 切换一个组件的显示答案

【问题标题】：React - toggle display of one component from the onClick of another componentReact - 从另一个组件的 onClick 切换一个组件的显示
【发布时间】：2017-06-12 06:07:40
【问题描述】：

我正在尝试构建我的第一个 React 项目，目前正在将一个汉堡导航按钮和一个在单击导航时出现的菜单放在一起。

我把它分成两个部分；汉堡包和 MenuOverlay。两者的代码如下。

目前我有一个 onClick on Hamburger 来切换一个类，但我如何也从该点击切换菜单？它被 display: none;默认。可能是一个非常基本的问题，所以很抱歉 - 仍然试图让我的头脑了解 React。

菜单叠加

import React from 'react';
import { Link } from 'react-router';

const MenuOverlay = () => {
    return (
        <div className="menuOverlay">
            <div className="innerMenu">
                <p><Link to="/">Home</Link></p>
                <p><Link to="/">About</Link></p>
                <p><Link to="/">Contact</Link></p>
            </div>
        </div>
    );
};

export default MenuOverlay;

汉堡

import React, { Component } from 'react';

class Hamburger extends Component {
    constructor(props) {
        super(props);

        this.state = { active: '' };
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        var toggle = this.state.active === 'is-active' ? '' : 'is-active';
        this.setState({active: toggle});
    }

    render() {

        return (
            <button className={`hamburger hamburger--emphatic fadein one ${this.state.active}`} onClick={this.handleClick} type="button">
                <span className="homeMenuTextButton">Menu</span>
                <span className="hamburger-box">
                    <span className="hamburger-inner"></span>
                </span>
            </button>
        );
    }
}

export default Hamburger;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

在最简单的形式中，您将拥有一个容器组件，将它们包裹起来并管理组件的状态。

<MenuContainer>
 <Hamburger />
 <MenuOverlay />
</MenuContainer>

在<MenuContainer> 中，您将拥有active 一些快速伪代码的状态。

class MenuContainer extends React.Component {
  constructor() {
    super();

    this.state = { active: false} 
  }

  toggleMenu = () => {

  // function that will toggle active/false
    this.setState((prevState) => {
      active: !prevState.active
    });
  }


  render() {
    return ( 
      <div>
        <Hamburger active={this.state.active} onClick={this.toggleMenu} />
        <MenuOverlay active={this.state.active} />
      </div>
    )
  }
}

所以在汉堡包中你只需使用this.props.onClick 来更改活动状态，然后在那些相应的组件中使用this.props.active 的道具来确定应该应用哪些类，等等。

【讨论】：

谢谢你。我已经让它工作了，但我不得不将 Hamburger 和 MenuOverlay 更改为基于类的组件。我做对了吗？我只是有这种唠叨的感觉，它们应该是功能组件，我不想养成坏习惯。 MenuContainer jsfiddle.net/xtgq6La0 Hamburger jsfiddle.net/4jd24t85 MenuOverlay jsfiddle.net/5t2bsobc 再次感谢
在考虑类与功能组件时有两个问题要问：这个组件是否有任何状态，或者我是否需要使用任何组件生命周期方法。如果其中任何一个为真，则使用类组件系统，否则只需使用纯功能组件。在这种情况下，我会说您制作这些功能组件是正确的

【解决方案2】：

鉴于一个元素不是另一个元素的父元素，您将不得不拉起变量，将切换信息保持在元素链中，直到它位于一个公共位置。

也就是说，将“活动”状态变量保留在两个元素的祖先中，并在 props 中向 Hamburger 提供一个回调，该回调在调用时会修改该祖先组件的状态。同时，还将活动状态变量作为道具向下传递给MenuOverlay，一切都应该协同工作。

具体来说，

当您想要聚合来自多个子组件的数据或让两个子组件相互通信时，将状态向上移动以使其存在于父组件中。然后，父组件可以通过 props 将状态向下传递给子组件，以便子组件始终彼此同步并与父组件同步。

【讨论】：