反应切换组件

我下面有这个简单的代码。当我按下切换按钮时，组件 Child 应该隐藏/显示，但事实并非如此。

我需要重新渲染一些东西吗？ 我不想切换进/出 CSS 类，只需通过单击按钮进行切换

import React, {Component} from 'react';

let active = true

const handleClick = () => {
    active = !active
}

class Parent extends React.Component {
    render() {      
        return (    
            <div>  
                <OtherComponent />

                {active && <Child />}

                <button type="button" onClick={handleClick}>
                    Toggle
                </button>

            </div>            
        )           
    }
}

class Child extends React.Component {
    render() {

        return (    
            <div>          
                I am the child
            </div>            
        )             
    }
}

class OtherComponent extends React.Component {
    render() {       
        return (    
            <div>          
                I am the OtherComponent
            </div>            
        )           
    }
}

您需要通过状态获取或设置它：

class Parent extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.state = {
            active: true,
        };

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState({
            active: !this.state.active
        });
    }

    render() {
        return (
            <div>
                <OtherComponent />

                {this.state.active && <Child />}

                <button type="button" onClick={this.handleClick}>
                    Toggle
                </button>

            </div>
        )
    }
}

Note使用这种方法，您将重新：渲染整个父组件（及其子组件）。
当您传递一个prop到子组件，它将根据此 prop 渲染自己的内容（它可以渲染一个空的div或者其他的东西）。
有许多库可以让您轻松完成这项工作，例如反应崩溃 https://github.com/nkbt/react-collapse与动画和东西。