isValidElement 會檢查一個值是否為 React 元素。

const isElement = isValidElement(value)

參考

isValidElement(value)

呼叫 isValidElement(value) 來檢查 value 是否為 React 元素。

import { isValidElement, createElement } from 'react';

// ✅ React elements
console.log(isValidElement(<p />)); // true
console.log(isValidElement(createElement('p'))); // true

// ❌ Not React elements
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // false

請參閱下面的更多範例。

參數

  • value：您想要檢查的值。它可以是任何類型的值。

回傳值

如果 value 是一個 React 元素，isValidElement 會回傳 true。否則，它會回傳 false。

注意事項

  • 只有 JSX 標籤 以及由 createElement 回傳的物件才被視為 React 元素。 例如，即使像 42 這樣的數字是一個有效的 React _節點_（而且可以從元件回傳），它也不是一個有效的 React 元素。使用 createPortal 建立的陣列和入口 _也不_ 被視為 React 元素。

用法

檢查某個東西是否為 React 元素

呼叫 isValidElement 來檢查某個值是否為 *React 元素*。

React 元素是：

對於 React 元素，isValidElement 會回傳 true

import { isValidElement, createElement } from 'react';

// ✅ JSX tags are React elements
console.log(isValidElement(<p />)); // true
console.log(isValidElement(<MyComponent />)); // true

// ✅ Values returned by createElement are React elements
console.log(isValidElement(createElement('p'))); // true
console.log(isValidElement(createElement(MyComponent))); // true

任何其他值，例如字串、數字或任意物件和陣列，都不是 React 元素。

對於它們，isValidElement 會回傳 false

// ❌ These are *not* React elements
console.log(isValidElement(null)); // false
console.log(isValidElement(25)); // false
console.log(isValidElement('Hello')); // false
console.log(isValidElement({ age: 42 })); // false
console.log(isValidElement([<div />, <div />])); // false
console.log(isValidElement(MyComponent)); // false

需要使用 isValidElement 的情況非常少見。它主要在呼叫 *僅* 接受元素的其他 API（例如 cloneElement）時，並且您想要避免在參數不是 React 元素時發生錯誤的情況下才有用。

除非您有非常具體的理由需要新增 isValidElement 檢查，否則您可能不需要它。

深入探討

React 元素 vs React 節點

當您撰寫元件時，您可以從中回傳任何種類的 *React 節點*

function MyComponent() {
  // ... you can return any React node ...
}

React 節點可以是：

  • 像 <div /> 或 createElement('div') 建立的 React 元素
  • 使用 createPortal 建立的入口網站
  • 字串
  • 數字
  • true、false、null 或 undefined（這些都不會顯示）
  • 其他 React 節點的陣列

注意：isValidElement 檢查參數是否為 *React 元素*，而不是檢查它是否為 React 節點。 例如，42 不是有效的 React 元素。然而，它是一個完全有效的 React 節點

function MyComponent() {
  return 42; // It's ok to return a number from component
}

這就是為什麼您不應該使用 isValidElement 作為檢查某個東西是否可以渲染的方式。

上一篇forwardRef
下一篇PureComponent