Rumah > Artikel > hujung hadapan web > Bagaimana untuk menyembunyikan unsur berdasarkan keadaan dalam tindak balas
Kaedah pelaksanaan: 1. Gunakan pembolehubah keadaan untuk mengawal sama ada untuk memaparkan elemen Jika nilainya palsu, kandungan tidak akan dipaparkan secara langsung 2. Kawal atribut paparan melalui gaya dan sembunyikan elemen apabila nilai atribut tiada; 3. Tukar hide melalui className secara dinamik untuk memaparkan dan menyembunyikan elemen.
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi react18, komputer Dell G3.
React
Terdapat tiga cara untuk mengawal paparan dan penyembunyian elemen:
Pertama ialah untuk mengawal sama ada untuk memaparkan elemen melalui pembolehubah state
, serupa dengan vue
dalam v-if
.
Kaedah kedua ialah mengawal atribut style
melalui display
, serupa dengan vue
dalam v-show
.
Yang ketiga ialah melalui pensuisan dinamik className
.
第一种方法是通过此例中showElem变量来控制是否加载元素的,如果showElem为
false
,内容是直接不会渲染的。
class Demo extends React.Component{ constructor(props){ super(props); this.state = { showElem:true } } render(){ return ( <div> { this.state.showElem?( <div>显示的元素</div> ):null } </div> ) } }
Kaedah ini sangat mudah, ia adalah untuk mengawal paparan dan penyembunyian elemen melalui atribut display
.
class Demo extends React.Component{ constructor(props){ super(props); this.state = { showElem:'none' } } render(){ return ( <div style={{display:this.state.showElem}}>显示的元素</div> ) } }
Tukar className
melalui hide
untuk memaparkan dan menyembunyikan elemen.
class Demo extends React.Component{ constructor(props){ super(props); this.state = { showElem:true } } render(){ return ( <div> {/* 写法一 */} <div className={this.state.showElem?'word-style':'word-style hide'}>显示的元素</div> {/* 写法二 */} <div className={`${this.state.showElem?'':'hide'} word-style`}>显示的元素</div> </div> ) } }
Kaedah 1 tidak sesuai untuk kawalan kerap paparan dan penyembunyian, kerana ia akan memaparkan semula elemen, yang lebih intensif prestasi. Dalam kes ini, kaedah kedua atau ketiga adalah lebih munasabah untuk dikawal melalui paparan.
Kaedah 1 sesuai untuk halaman dengan keselamatan yang tinggi, seperti halaman maklumat pengguna Kandungan yang berbeza dipaparkan mengikut tahap pengguna yang berbeza Pada masa ini, jika anda menggunakan kaedah 1 atau 2, pengguna masih boleh melihatnya jika mereka membuka rangkaian , kerana halaman itu masih dipaparkan, hanya tersembunyi. Kaedah pertama adalah untuk tidak secara langsung memaparkan elemen DOM maklumat pengguna, memastikan keselamatan.
[Cadangan berkaitan: Tutorial video Redis, Pengajaran pengaturcaraan]
Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan unsur berdasarkan keadaan dalam tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!