Ajout de CSS pour réagir/JSX pour masquer un composant

Question

Je cache et montre un composant basé sur l'état d'une case à cocher, et j'utilise un opérateur ternaire pour décider si le composant est affiché ou masqué. Cependant, ce composant gère les données, il serait donc préférable de simplement masquer le composant avec CSS, car chaque fois que le composant est ré-affiché, il crée une nouvelle requête. Ci-dessous l'opérateur ternaire:

const displayWidget = this.state.checked ? <Widget /> : null; 

J'ai regardé d'autres exemples en essayant d'accomplir la même chose, certains suggérant quelque chose comme:

const divStyle = { 
    visibility: 'hidden', 
} 

const displayWidget = this.state.checked ? <Widget /> : <Widget style= {divStyle} />` 

Le deuxième exemple la bonne façon de s'y prendre et je » Je fais juste quelque chose de mal, ou y a-t-il une autre façon de résoudre ce problème?

Answer 1

La réponse simple est que vous pouvez faire soit, il est simplement basé sur vos besoins.

retour null

const displayWidget = this.state.checked ? <Widget /> : null; 

En procédant ainsi, signifie que lorsque this.state.checked est true alors votre composant Widget est mounted et componentWillMount/componentDidMount seront appelés.

Toutefois, lorsque this.state.checked est false le composant Widget sera unmount et si vous vous en tenez un console.log dans la fonction componentWillUnmount vous verrez cela.

Si this.state.checked est true (encore une fois), alors votre composant Widget est mounted (encore une fois) et componentWillMount/componentDidMount seront appelés (à nouveau).

Hiding via css

Je changerais votre code à ceci:

const divStyle = { 
    visibility: 'hidden', 
} 

const displayWidget = <Widget style= {...this.state.checked ? {} : divStyle} /> 

De cette façon, signifie que le premier render et this.state.checked est true alors il sera mount de la même manière que le nul approche.

Toutefois, lorsque this.state.checked est false, unmount est pas appelé comme composant est encore mounted mais est maintenant tout simplement être caché par css.

Une approche alternative à cacher un composant, mais le garder monté

<Widget visible={this.state.checked} /> 

Et dans la méthode render() de votre Widget composant que vous pourriez faire quelque chose comme:

render() { 
    if (!this.props.visible) { 
    return null; 
    } 
    return <span>widget content</span>; 
}