Pengesahan Props dalam React

1. Apakah Props dalam Reaksi?

props (singkatan untuk "properties") ialah mekanisme untuk menghantar data dan pengendali peristiwa dari satu komponen ke komponen yang lain, biasanya daripada komponen induk kepada komponen anak.

Komponen induk

import React from 'react';

const App = () => {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
};

export default App;

Komponen kanak-kanak yang menerima prop

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

2. Mengapa Mengesahkan Props?

Mengesahkan prop memastikan bahawa komponen menerima jenis data yang betul, dan prop yang diperlukan disediakan. Ini membantu untuk:

• Cegah pepijat.

• Jadikan komponen lebih mudah diramal

Sebagai contoh, jika komponen mengharapkan rentetan tetapi menerima nombor, ia boleh membawa kepada tingkah laku yang tidak dijangka.

3. Menggunakan PropTypes untuk Pengesahan

React menyediakan pakej yang dipanggil prop-types yang membolehkan anda menguatkuasakan pengesahan prop. Jika prop yang dihantar kepada komponen tidak sepadan dengan jenis yang dijangkakan, React akan merekodkan amaran dalam konsol.

4. Memasang Pakej jenis prop

Jika anda bekerja dalam projek React baharu, anda mungkin perlu memasang pakej jenis prop terlebih dahulu:

npm pasang jenis prop

5. Menentukan PropTypes dalam Komponen

Anda boleh menentukan jenis prop dengan menambahkan objek propTypes pada komponen anda.

import PropTypes from 'prop-types';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

di sini: Menambah PropTypes untuk mengesahkan prop "nama"
Mengharapkan "nama" menjadi rentetan yang diperlukan

6. Jenis Prop Biasa

Berikut ialah beberapa jenis pengesahan prop biasa yang boleh anda gunakan:

1. Jenis Primitif:

• PropTypes.string - Memastikan prop ialah rentetan.
• PropTypes.number - Memastikan prop ialah nombor.
• PropTypes.bool - Memastikan prop ialah boolean.
• PropTypes.func - Memastikan prop ialah fungsi.
• PropTypes.object - Memastikan prop ialah objek.
• PropTypes.array - Memastikan prop ialah tatasusunan.
• PropTypes.node - Memastikan prop ialah sebarang kandungan yang boleh ditukar (nombor, rentetan, elemen,

2. Props yang Diperlukan: Gunakan .isRequired untuk menguatkuasakan bahawa prop diluluskan:

Greeting.propTypes = {
  name: PropTypes.string.isRequired,
};

3. Tatasusunan Jenis Tertentu: Anda boleh mengesahkan tatasusunan untuk memastikan kandungannya daripada jenis tertentu:

MyComponent.propTypes = {
  items: PropTypes.arrayOf(PropTypes.string).isRequired, // Array of strings
};

4. Objek Bentuk Tertentu:

MyComponent.propTypes = {
  user: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  }).isRequired,
};

5. Salah satu Set Nilai: Anda boleh menguatkuasakan bahawa prop ialah salah satu daripada beberapa nilai yang ditentukan:

MyComponent.propTypes = {
  status: PropTypes.oneOf(['success', 'error', 'loading']).isRequired,
};

6. Pengesahan Prop Tersuai: Anda boleh mencipta logik pengesahan tersuai anda sendiri:

MyComponent.propTypes = {
  age: function (props, propName, componentName) {
    if (props[propName] < 18) {
      return new Error(
        `${propName} in ${componentName} must be at least 18 years old`
      );
    }
  },
};

7. Contoh Props Pengesahan

Mari kita cipta komponen yang menjangkakan beberapa jenis prop dan mengesahkannya:

import React from 'react';

const App = () => {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
};

export default App;

8. Props Lalai

Anda juga boleh menentukan prop lalai menggunakan Props lalai sekiranya prop tidak disediakan.

const Greeting = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

9. Mengendalikan Jenis Prop Tidak Sah

Jika jenis prop tidak betul, React akan merekodkan amaran dalam konsol penyemak imbas, tetapi aplikasi masih akan berfungsi. Adalah penting untuk ambil perhatian bahawa PropTypes hanya dijalankan dalam mod pembangunan (iaitu, ia tidak dijalankan dalam binaan pengeluaran).

Atas ialah kandungan terperinci Pengesahan Props dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!