Bagaimana untuk menunjukkan dan menyembunyikan div sebagai tindak balas

Cara untuk menunjukkan dan menyembunyikan div sebagai tindak balas: 1. Gunakan "{showoverlay? (

):null}" dalam kandungan komponen berfungsi untuk menunjukkan dan menyembunyikan div 2; Tentukan nilai boleh dilihat dalam logik perniagaan dan tetapkan "style={{ display: `${visible ? '' : 'none'}` }}" dalam gaya komponen.

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk menunjukkan dan menyembunyikan div sebagai tindak balas?

Cara menyembunyikan dan menunjukkan komponen di bawah komponen berfungsi bertindak balas (dua kaedah)

Kaedah pertama

Fungsi Kod komponen formula

adalah seperti berikut (contoh):

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

2. Komponen kelas

Contoh dalam talian pada asasnya adalah operasi di bawah komponen kelas.

Kod adalah seperti berikut (contoh):

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

Kaedah kedua

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

Pembelajaran yang disyorkan: "bertindak balas tutorial video 》

Atas ialah kandungan terperinci Bagaimana untuk menunjukkan dan menyembunyikan div sebagai tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!