reactjs - show component depending on state

Question

I have 2 components that I want to display based on the state. basically when I click the button I want to toggle 2 components. I dont understand why when I click the button nothing changes.

import React, { Component } from 'react';
import { Route, Link, NavLink, Redirect } from 'react-router-dom'

class Header extends Component {

    constructor(props) {
        super(props);

        this.state = {isToggleOn: false};
        this.handleClick = this.handleClick.bind(this);

    }

    handleClick() {
        this.setState(prevState => ({
            isToggleOn: !prevState.isToggleOn
        }));
    }

    render() {
        return(
            <header>
                {this.state.isToggleOn ? <MenuOpened /> : <MenuClosed />}
            </header>
        )
    }
}

const MenuClosed = () => {
    return (
        <button onClick={this.handleClick}>
            {this.state.isToggleOn ? 'ON' : 'OFF'}
        </button>
    )
}

const MenuOpened = () => {
    return(
        <ul>
            <li><NavLink to="/page-1" exact>page1</NavLink></li>
            <li><NavLink to="/page-2" exact>page2</NavLink></li>

        </ul>
    )
}

export default Header;

标签： reactjs

Answer 1

您必须将 handleClick 函数和 isToggleOn 状态作为道具传递给 MenuClosed 组件。

{this.state.isToggleOn ? <MenuOpened /> : <MenuClosed handleClick={this.handleClick} isToggleOn={this.state.isToggleOn} />} 

接着：

const MenuClosed = ({handleClick,  isToggleOn}) => { return ( <button onClick={handleClick}> {isToggleOn ? 'ON' : 'OFF'} </button> ) }