Comment masquer des éléments en fonction des conditions en réaction

Méthode d'implémentation : 1. Utilisez la variable d'état pour contrôler si l'élément doit être rendu. Si la valeur est fausse, le contenu ne sera pas rendu directement ; 2. Contrôlez l'attribut d'affichage via le style et masquez l'élément lorsque la valeur de l'attribut est affichée. n'est aucun ; 3. Utilisez className Basculez dynamiquement sur Masquer pour afficher et masquer les éléments.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version React18, ordinateur Dell G3.

React Il existe trois façons de contrôler l'affichage et le masquage des éléments : React控制元素显示和隐藏的方法有三种方法：

• 第一种是通过state变量来控制是否渲染元素，类似vue中的v-if。

• 第二种是通过style控制display属性，类似vue 中的v-show。

• 第三种是通过动态切换className。

方法一：

第一种方法是通过此例中showElem变量来控制是否加载元素的，如果showElem为false，内容是直接不会渲染的。

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

方法二：

这个方法很简单，就是通过display属性来控制元素显示和隐藏。

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

方法三：

通过className切换hide

• La première est via state Variable pour contrôler s'il faut restituer les éléments, similaire à v-if dans vue.

• La deuxième méthode consiste à contrôler l'attribut display via style, similaire à v-show dans <code>vue</ code> .

• La troisième méthode consiste à changer dynamiquement className.

Méthode 1 :

La première méthode consiste à utiliser la variable showElem dans cet exemple pour contrôler s'il faut charger l'élément si showElem est <. /code ><code>false, le contenu ne sera pas rendu directement.

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

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. rrreee

Méthode 3 : 🎜

🎜Basculez de hide à className pour afficher et masquer les éléments. 🎜🎜rrreee🎜La méthode 1 ne convient pas au contrôle fréquent de l'affichage et du masquage, car elle restituera les éléments, ce qui nécessite 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 méthode 1 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 méthode 1 ou 2, l'utilisateur peut toujours le voir s'il ouvre le fichier. réseau, 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 associées : 🎜Tutoriel vidéo Redis🎜, 🎜Enseignement de la programmation🎜】🎜

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!