Bagaimana untuk mengisytiharkan pemalar dalam kelas React?

Apabila membangunkan aplikasi menggunakan React, adalah perlu untuk mengisytiharkan pemalar untuk menyimpan nilai yang kekal tidak berubah sepanjang hayat komponen atau aplikasi. Pemalar boleh membantu meningkatkan kebolehbacaan kod, menyediakan lokasi pusat untuk mengurus nilai dikongsi dan meningkatkan kebolehselenggaraan. Dalam artikel ini, kita akan meneroka cara mengisytiharkan pemalar dalam komponen kelas React.

Import React

Pertama, kami menganggap bahawa anda telah menyediakan persekitaran React anda dan mempunyai komponen kelas sedia untuk digunakan. Sebelum mengisytiharkan pemalar, pastikan anda telah mengimport perpustakaan yang diperlukan. Ini termasuk mengimport React, yang merupakan perpustakaan teras untuk membina antara muka pengguna dalam React.

import React from 'react';

Isytihar pemalar dalam komponen kelas React

Untuk mengisytiharkan pemalar dalam komponen kelas React, anda mempunyai dua pilihan:

• Atribut kelas statik: Atribut kelas statik diisytiharkan terus dalam definisi kelas dan boleh diakses tanpa membuat tika kelas. Pendekatan ini membolehkan anda menentukan pemalar yang dikongsi antara semua kejadian komponen.

Contoh

Dalam contoh di bawah, kami mengisytiharkan pemalar bernama MY_CONSTANT dalam pembina kelas. Kemudian gunakan ini.MY_CONSTANT untuk mengakses pemalar dalam kaedah render.

class MyComponent extends React.Component {
  static MY_CONSTANT = 'Hello, World!';

  render() {
    return <div>{MyComponent.MY_CONSTANT}</div>;
  }
}

Output

Hello, World!

• Pembolehubah peringkat kelas: Pembolehubah peringkat kelas boleh diisytiharkan dalam pembina kelas. Tidak seperti sifat kelas statik, pembolehubah peringkat kelas adalah khusus untuk setiap contoh komponen. Kaedah ini berguna apabila anda memerlukan pemalar khusus contoh.

Contoh

Dalam contoh di bawah, kami mengisytiharkan pemalar bernama MY_CONSTANT dalam pembina kelas. Kemudian gunakan ini.MY_CONSTANT untuk mengakses pemalar dalam kaedah render.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.MY_CONSTANT = 'Hello, World!';
  }

  render() {
    return <div>{this.MY_CONSTANT}</div>;
  }
}

Output

Hello, World!

Menggunakan pemalar dalam komponen React

Selepas mengisytiharkan pemalar dalam komponen kelas React, anda boleh menggunakannya dalam kaedah komponen, cangkuk kitaran hayat atau templat JSX. Mari lihat cara menggunakan pemalar yang diisytiharkan dalam contoh berikut:

Contoh

Dalam contoh di bawah, pemalar MY_CONSTANT diakses dalam kaedah handleClick, yang dicetuskan apabila butang diklik. Pemalar ini juga dipaparkan dalam teg

dalam templat JSX.

class MyComponent extends React.Component {
  static MY_CONSTANT = 'Hello, World!';

  handleClick() {
    console.log(MyComponent.MY_CONSTANT);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Click Me</button>
        <p>{MyComponent.MY_CONSTANT}</p>
      </div>
    );
  }
}

Output

Kesimpulan

Dalam artikel ini, kami membincangkan cara mengisytiharkan pemalar dalam kelas React. Mengisytiharkan pemalar dalam komponen kelas React menyediakan cara untuk menyimpan nilai yang kekal tidak berubah sepanjang hayat komponen. Sama ada menggunakan sifat kelas statik atau pembolehubah peringkat kelas, pemalar meningkatkan kebolehbacaan dan kebolehselenggaraan kod serta menyediakan tempat utama untuk mengurus nilai yang dikongsi

Atas ialah kandungan terperinci Bagaimana untuk mengisytiharkan pemalar dalam kelas React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!