Comment afficher et masquer les divs en réaction

Comment afficher et masquer les divs dans React : 1. Utilisez "{showoverlay? (

):null}" dans le contenu du composant fonctionnel pour afficher et masquer les divs ; Déterminez la valeur de visible et définissez "style={{ display: `${visible ? '' : 'none'}` }}" dans le style du composant.

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

Comment afficher et masquer les divs dans React ?

Comment masquer et afficher un composant sous le composant fonctionnel React (deux méthodes)

La première méthode

1 Composant fonctionnel

Le code est le suivant (exemple) :

//函数式组件内容中
 const [showoverlay, setshowoverlay] = useState(false);
//渲染时,运算符
return(
     <>
     {showoverlay? (<div>显示或隐藏</div>):null}
     </>
)

2.

Les exemples en ligne sont essentiellement des opérations sous composants de classe.

Le code est le suivant (exemple) :

//构造函数中
constructor(props) {
    super(props);
    this.state = {showWarning: true}
  }
 //渲染时
      <>
  { this.state.showWarning?
        <div>显示或隐藏</div> :null
        }
      </>

La deuxième méthode

//在业务逻辑中判断visible的取值
const [visible, setVisible] = useState<boolean>(false);
//组件样式中设置
<div className="overlaydiv" ref={overlayContainerRef} style={{ display: `${visible ? &#39;&#39; : &#39;none&#39;}` }}>
   组件内容
</div>

Apprentissage recommandé : "

tutoriel vidéo React"

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!