Reagieren toggle-Komponente

Ich habe diesen einfachen code unten. Wenn ich drücken Sie die Toggle-Taste der Komponente Kind sollte ein - /ausblenden, aber es ist nicht.

Muss ich neu Rendern etwas?
Ich will nicht zu Schalter in/out-eine CSS-Klasse, wechseln Sie einfach über einen Klick auf eine Schaltfläche

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>            
        )           
    }
}
InformationsquelleAutor Rory | 2017-05-18
Schreibe einen Kommentar