反应切换组件

Question

我在下面有这个简单的代码.当我按下切换按钮时,组件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>            
        )           
    }
}

Answer 1

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

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>
        )
    }
}

请注意,使用此方法,您将重新:渲染整个父组件(以及它的子组件).
考虑使用另一种方法,当您传递prop给子组件时,它将使用基于此prop的内容呈现自身(它可以呈现为空div或其他内容).
有许多库可以让您轻松完成这项工作,例如使用动画和内容进行反应崩溃.