Question

我有两个要根据状态显示的组件。基本上，当我单击按钮时，我想切换2个组件。我不明白为什么当我单击按钮时什么都没有改变。

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;

Answer 1

您必须将handleClick函数和isToggleOn状态作为对MenuClosed组件的支持。

$2

然后：

$ cat so.txt
sagfdsga
asgasd
asdg
sdag
asg
:wq
234
534215.4361436


i
favorite
I have a text file (mcafee agent install script named install.sh) that contains many lines, including the following lines that I am interested in:

THIS_MAJOR=5
THIS_MINOR=0
THIS_PATCH=6
THIS_BUILD=491

sagfdsga
asgasd
asdg
sdag


$ awk -F "=" '/^THIS_/ && /MAJOR|MINOR|PATCH|BUILD/ && !/AGENT/ {(output=="")? output=$2 : output=output"."$2} END {print output}'  so.txt
5.0.6.491

根据状态显示组件

1 个答案: