Bagaimana untuk Menunjukkan dan Menyembunyikan Elemen dalam React Native dengan State?

Menunjukkan dan Menyembunyikan Elemen dengan React Native

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:

1. Buat komponen React baharu, seperti MyComponent.
2. Dalam kaedah pemaparan komponen anda, tunjukkan elemen yang ingin anda tunjukkan atau sembunyikan dan gunakan pemaparan bersyarat untuk menentukan sama ada elemen itu harus kelihatan atau tidak.
3. Dalam kaedah pembina komponen anda, cipta pembolehubah keadaan baharu, seperti showElement dan tetapkannya kepada false.
4. Tambah pengendali acara onClick kepada elemen yang mencetuskan perubahan keterlihatan. Dalam pengendali acara, togol pembolehubah keadaan showElement.
5. Gunakan pembolehubah keadaan showElement dalam kaedah pemaparan untuk memaparkan elemen secara bersyarat. Jika showElement adalah benar, elemen itu akan kelihatan. Jika showElement palsu, elemen akan disembunyikan.

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!