Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Menunjukkan dan Menyembunyikan Elemen dalam React Native dengan State?
React menyediakan beberapa cara untuk memanipulasi keterlihatan elemen pada halaman. Pendekatan biasa ialah menggunakan penggayaan sebaris untuk menetapkan sifat paparan. Walau bagaimanapun, kaedah ini memerlukan penggayaan sebaris, yang boleh menyusahkan dan menjadikan kod kurang boleh dibaca.
Penyelesaian yang lebih elegan ialah menggunakan API React State. API Negeri membolehkan anda mentakrif dan mengurus data dalam komponen React. Dengan menukar keadaan komponen, anda boleh mencetuskan pemaparan semula, yang akan mengemas kini UI berdasarkan keadaan baharu.
Begini cara anda boleh menunjukkan atau menyembunyikan elemen pada halaman melalui acara klik menggunakan API React State:
Berikut ialah contoh cara anda boleh melaksanakan ini:
<code class="javascript">class MyComponent extends React.Component { constructor(props) { super(props); this.state = { showElement: false }; } toggleShowElement = () => { this.setState((prevState) => ({ showElement: !prevState.showElement })); }; render() { return ( <div> {this.state.showElement && <div>Hello World!</div>} <button onClick={this.toggleShowElement}>Toggle</button> </div> ); } }</code>
Coretan kod ini mencipta komponen React baharu yang dipanggil MyComponent yang menjadikan div dengan teks "Hello World!" apabila pembolehubah keadaan showElement adalah benar. Ia juga termasuk butang yang menogol keterlihatan "Hello World!" elemen.
Atas ialah kandungan terperinci Bagaimana untuk Menunjukkan dan Menyembunyikan Elemen dalam React Native dengan State?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!