React - 從另一個組件的onClick切換顯示一個組件

我正在嘗試構建我的第一個React項目，並且當前正在將漢堡導航按鈕和單擊導航時出現的菜單組合在一起。React - 從另一個組件的onClick切換顯示一個組件

我已經把它分成兩個部分;漢堡包和MenuOverlay。兩者的代碼如下。

目前我有一個在漢堡切換一個類的onClick，但我怎麼也從該點擊切換菜單？它隱藏着顯示：無;默認。可能是一個非常基本的問題，所以很抱歉 - 仍然試圖讓我的頭腦圍繞React。

MenuOverlay

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;

來源

2017-01-26 Robkwood

以最簡單的形式，您將擁有一個包裝它們的容器組件，並管理組件的狀態。

<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道具來確定類應該應用什麼，等

來源

2017-01-26 17:37:06 finalfreq

感謝你爲這個。我有它的工作，但我不得不改變漢堡和MenuOverlay到基於類的組件。我是否正確？我只是有這種嘮叨的感覺，他們應該是功能組件，我不想陷入壞習慣。 ** MenuContainer ** https://jsfiddle.net/xtgq6La0/ ** Hamburger ** https：// jsfiddle。淨/ 4jd24t85/ ** ** MenuOverlay https://jsfiddle.net/5t2bsobc/ 再次感謝 – Robkwood

有兩個問題考慮一類VS功能組件時，問：這是否元器件具有任何國家或做我需要使用任何組件生命週期方法。如果其中任何一個都是真的，則使用類組件系統，否則只使用純功能組件。在這種情況下，我會說你是正確的做出這些功能組件 – finalfreq

鑑於一個元素不是另一個元素的父母，你將不得不拉起變量保持撥動信息了直到它存在於一個共同的地方。

即，保持「活躍」狀態變量中的兩個要素的祖先，並提供到漢堡中，調用它時，修改該祖先組件的狀態道具的回調。同時，還要將活動狀態變量傳遞給MenuOverlay作爲道具，並且所有內容都應該一起工作。

具體來說，

當你想從多個孩子彙總數據，或有兩個子組件相互通信，移動狀態下向上，以便它在父組件中生存。然後父母可以通過道具將狀態傳遞迴兒童，以便孩子的組件始終彼此同步並與父母同步。

來源

2017-01-26 17:33:19

React - 從另一個組件的onClick切換顯示一個組件

回答

相關問題