Comment afficher et masquer en réaction

Comment afficher et masquer dans React : 1. Utilisez des variables d'état pour contrôler s'il faut restituer les éléments, similaire à [v-if] dans vue 2. Contrôlez l'attribut d'affichage via le style, similaire à [v- ; show] dans vue ;3. En changeant dynamiquement className.

L'environnement d'exploitation de ce tutoriel : système Windows10, React16, cet article est applicable à toutes les marques d'ordinateurs.

Méthode cachée d'affichage de réaction :

Première méthode :

La première méthode passe par cet exemple showElemVariable à contrôler s'il faut charger les éléments. Si showElem est faux, le contenu ne sera pas rendu directement.

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:true
        }
    }
    render(){
        return (
            <div>
                {
                    this.state.showElem?(
                        <div>显示的元素</div>
                    ):null
                }
            </div>
        )
    }
}

Méthode 2 :

Cette méthode est très simple, elle consiste à contrôler l'affichage et le masquage des éléments grâce à l'attribut display.

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:'none'
        }
    }
    render(){
        return (
            <div style={{display:this.state.showElem}}>显示的元素</div>
        )
    }
}

Méthode 3 :

Basculez le masquage via className pour afficher et masquer les éléments.

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            showElem:true
        }
    }
    render(){
        return (
            <div>
                {/* 写法一 */}
                <div className={this.state.showElem?&#39;word-style&#39;:&#39;word-style hide&#39;}>显示的元素</div>
                {/* 写法二 */}
                <div className={`${this.state.showElem?&#39;&#39;:&#39;hide&#39;} word-style`}>显示的元素</div>
            </div>
        )
    }
}

Il est à noter que ces méthodes présentent également des différences d'utilisation :

• La méthode 1 n'est pas adaptée pour contrôler fréquemment l'affichage et le masquage d'éléments, car elle restituer les éléments, ce qui consomme plus de performances. Dans ce cas, la deuxième ou la troisième méthode est plus raisonnable pour contrôler via l'affichage.

• La première méthode convient aux pages à haute sécurité, telles que les pages d'informations utilisateur, qui affichent un contenu différent selon les différents niveaux d'utilisateur. À l'heure actuelle, si vous utilisez la première méthode ou la deuxième méthode. , l'utilisateur Si vous ouvrez le réseau, vous pouvez toujours le voir, car la page est toujours affichée, juste cachée. La première méthode consiste à ne pas restituer directement les éléments DOM des informations utilisateur, garantissant ainsi la sécurité.

Recommandations d'apprentissage gratuites associées : JavaScript(Vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!