Maison > Article > interface Web > 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.
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
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?'old':'old is-show'}>显示的元素</div> // 写法二 <div className={`${this.state.isShow?'':'is-show'} 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!