ReactJS - isValidElement() 函式

眾所周知，React 是一個用於建立 UI 的 JavaScript 庫。“React 元素”是 React 中的一個關鍵概念。因此，我們將瞭解如何使用 React 的 isValidElement 方法來確定一個值是否為 React 元素。

什麼是 isValidElement？

React 中的 isValidElement 方法用於確定一個值是否為 React 元素。人們可能會問，為什麼我們需要使用 isValidElement 來確定一個專案是否為 React 元素。有時我們需要與將 React 元件作為輸入的庫或函式進行通訊。在這種情況下，我們必須確保我們提供的值是 React 元素。這就是 isValidElement 函式派上用場的時候。

語法

const isElement = isValidElement(value)

引數

value − 我們要檢查的值。該值可以是任何型別。

返回值

如果該值為 React 元素，則該方法返回 true，否則返回 false。

使用 isValidElement，我們可以驗證某些內容是否為 React 元素。React 元素是 React 應用程式的基本構建塊。它們表示我們使用者介面的結構和內容。

示例

示例 - 簡單應用

我們必須從 'react' 包中匯入 isValidElement 才能使用它。以下是我們如何檢查一個值是否為 React 元素：

import React, { isValidElement, createElement } from 'react';

// These are react elements
console.log(isValidElement(<p />)); 
console.log(isValidElement(createElement('p'))); 

// These are not React elements
console.log(isValidElement(25)); 
console.log(isValidElement('Hello'));
console.log(isValidElement({ age: 42 })); 

輸出

true
true
false
false
false

示例 - 渲染專案列表

現在我們將建立一個小型 React 應用，展示 React 元素的概念以及 isValidElement 的用法。在這個應用中，我們將渲染一個專案列表。

import React, { isValidElement, createElement } from 'react';

function ItemList() {
   const items = [
      <li key="item1">Item 1</li>,
      createElement('li', { key: 'item2' }, 'Item 2'),
      'Item 3', // Not a React element
   ];
   return (
   <ul>
      {items.map((item, index) => (
         isValidElement(item) ? item : <li key={`item${index}`}>{item}</li>
      ))}
   </ul>
   );
}
function App() {
   return (
      <div>
         <h1>React isValidElement function Demo</h1>
         <ItemList />
      </div>
   );
}

export default App;

輸出

在 App 元件中，渲染了 <ItemList /> 元件，其中包含一個無序列表。在這個列表中，有三個列表項：“Item 1” - 使用 JSX 建立的 React 元素。“Item 2” - 使用 createElement 建立的 React 元素。“Item 3” - 不是 React 元素，它只是一個普通的字串。

示例 - 使用者輸入表單應用

讓我們建立一個使用者可以輸入資訊的表單。我們將使用 isValidElement 來檢查輸入的資料是否為有效的 React 元素。此應用的程式碼如下：

import React, { useState, isValidElement } from 'react';

const App = () => {
   const [inputValue, setInputValue] = useState('');   
   const handleInputChange = (e) => {
      setInputValue(e.target.value);
   };   
   const handleSubmit = (e) => {
      e.preventDefault();
      const isElement = isValidElement(<p>{inputValue}</p>);
      if (isElement) {
         alert(`You entered a valid React element: ${inputValue}`);
      } else {
         alert('Please enter a valid input.');
      }
   };   
   return (
      <div>
         <h1>User Input Form App</h1>
         <form onSubmit={handleSubmit}>
            <label>
               Enter Something:
               <input type="text" value={inputValue} onChange={handleInputChange} />
            </label>
            <button type="submit">Submit</button>
         </form>
      </div>
   );
};

export default App;

輸出

執行應用後，它會顯示一個標題和一個帶有提交按鈕的輸入欄位。使用者在頂部看到訊息“使用者輸入表單應用”。當用戶在輸入欄位中輸入某些內容時。使用者點選“提交”按鈕。應用使用 isValidElement 檢查輸入的值是否為有效的 React 元素。如果有效，則會顯示一個警報訊息，顯示“您輸入了一個有效的 React 元素：[inputValue]”。如果無效，則會顯示一個警報訊息，顯示“請輸入有效輸入”。

總結

isValidElement 是一個方便的函式，用於檢查一個值是否為 React 元素。雖然很少需要，但在需要確認我們的值對基於 React 的庫或方法有效時，它很有用。