Comment contrôler l'affichage et masquer en réaction

Comment contrôler l'affichage et le masquage dans React : 1. Utilisez des variables d'état pour contrôler le rendu des éléments ; 2. Contrôlez les attributs d'affichage via le style ; 3. Changez dynamiquement de nom de classe.

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

Comment contrôler l'affichage et le masquage dans React :

1 Utilisez des variables d'état pour contrôler s'il faut rendre les éléments

Similaire à v-if de vue.

utilise des variables pour contrôler s'il faut charger des éléments. Si la variable est fausse, le contenu ne sera pas rendu directement.

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

2. Contrôler l'attribut d'affichage via le style

est similaire à

v-show

en vue pour contrôler l'affichage et le masquage des éléments via l'attribut d'affichage

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

3. Affichez et masquez les éléments en changeant dynamiquement className

pour changer les noms de classe via className.

//.css文件
.is-show{
    display:none
}
//.js文件
class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            isShow:true
        }
    }
    render(){
        return (
            <div>
              // 写法一 
              <div className={this.state.isShow?&#39;old&#39;:&#39;old is-show&#39;}>显示的元素</div>
              // 写法二
              <div className={`${this.state.isShow?&#39;&#39;:&#39;is-show&#39;} old`}>显示的元素</div>
            </div>
        )
    }
}

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!