React 中的 Props 驗證

1. React 中的 Props 是什麼？

props（「屬性」的縮寫）是一種將資料和事件處理程序從一個元件傳遞到另一個元件（通常是從父元件到子元件）的機制。

父組件

import React from 'react';

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

export default App;

接收 props 的子元件

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

2. 為什麼要驗證 Prop？

驗證 props 可確保元件接收正確類型的數據，並提供所需的 props。這有助於：

• 防止錯誤。

• 使組件更可預測

例如，如果元件需要字串但收到數字，則可能會導致意外行為。

3. 使用 PropTypes 進行驗證

React 提供了一個名為 prop-types 的套件，可讓您強制執行 prop 驗證。如果傳遞給元件的 props 與預期類型不匹配，React 將在控制台中記錄警告。

4. 安裝 prop-types 套件

如果您正在處理新的 React 項目，您可能需要先安裝 prop-types 套件：

npm install prop-types

5. 在元件中定義 PropType

您可以透過將 propTypes 物件新增至元件來定義 prop 類型。

import PropTypes from 'prop-types';

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

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

這裡：新增 PropTypes 來驗證「name」屬性
期望“name”是必需的字串

6. 常見的 PropType

以下是您可以應用的一些常見類型的道具驗證：

1。原種：

• PropTypes.string - 確保 prop 是字串。
• PropTypes.number - 確保 prop 是一個數字。
• PropTypes.bool - 確保 prop 是布林值。
• PropTypes.func - 確保 prop 是一個函數。
• PropTypes.object - 確保 prop 是一個物件。
• PropTypes.array - 確保 prop 是一個陣列。
• PropTypes.node - 確保 prop 是任何可渲染的內容（數字、字串、元素、

2。必需的道具： 使用 .isRequired 強制傳遞道具：

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

3。特定類型的陣列： 您可以驗證陣列以確保其內容屬於特定類型：

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

4。特定形狀的物體：

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

5。一組值之一： 您可以強制某個 prop 是多個指定值之一：

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

6。自訂道具驗證：您可以建立自己的自訂驗證邏輯：

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. 驗證 Prop 的範例

讓我們建立一個需要多種類型 props 的元件並驗證它們：

import React from 'react';

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

export default App;

8.預設道具

如果未提供 prop，您也可以使用 defaultProps 定義預設 prop。

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

9. 處理無效的 prop 類型

如果 prop 類型不正確，React 將在瀏覽器控制台中記錄警告，但應用程式仍然可以運行。值得注意的是，PropTypes 僅在開發模式下運作（即它們不在生產版本中運作）。

以上是React 中的 Props 驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章！