So zeigen und verbergen Sie Divs in React

So zeigen und verbergen Sie Divs in React: 1. Verwenden Sie „{showoverlay? (dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68):null}“ im Inhalt der Funktionskomponente, um Divs anzuzeigen und auszublenden. 2. In der Geschäftslogik Bestimmen Sie den Wert von „visible“ und legen Sie „style={{ display: `${visible ? '' : 'none'}` }}“ im Komponentenstil fest.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie kann ich Divs in React ein- und ausblenden?

So verbergen und zeigen Sie eine Komponente unter der React-Funktionskomponente (zwei Methoden)

Die erste Methode

1. Funktionskomponente

Der Code lautet wie folgt (Beispiel):

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

2. Klassenkomponente

Bei den Online-Beispielen handelt es sich grundsätzlich um Operationen unter Klassenkomponenten.

Der Code lautet wie folgt (Beispiel):

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

Die zweite Methode

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

Empfohlenes Lernen: „Video-Tutorial reagieren“

Das obige ist der detaillierte Inhalt vonSo zeigen und verbergen Sie Divs in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!