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.

ReactTerdapat 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.

Kaedah satu:

第一种方法是通过此例中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 kedua:

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>
        )
    }
}

Kaedah 3:

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?&#39;word-style&#39;:&#39;word-style hide&#39;}>显示的元素</div>
                {/* 写法二 */}
                <div className={`${this.state.showElem?&#39;&#39;:&#39;hide&#39;} 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!