ReactJS - isElement()

React Js 庫的核心是將應用程式拆分為各種元件。每個元件都有其自己的生命週期。React 為我們提供了一些內建方法，我們可以在元件生命週期的特定階段覆蓋這些方法。

在本教程中，我們將學習如何使用 isElement() 方法。isElement() 方法在元素是 React 元素時返回 true。

所以，簡單來說，如果我們想了解網頁上的特定內容是否屬於我們的 React 應用程式的一部分，我們可以使用 isElement() 方法。此方法有助於理解和管理 React 應用程式中的元素。當我們處理應用程式的不同部分並需要知道它們是否是 React 元素時，它是一個方便的工具。

語法

var item = isElement(elem);

引數

elem - 我們需要檢查它是否是 React 元素的元素。

返回值

如果元素是 React 元素，則返回 true，否則返回 false。

示例

示例

所以，首先，我們將建立一個 React 專案，然後在 src 資料夾中開啟 App.js 檔案。在此檔案中，我們將編寫邏輯以確定輸入元素是否為 React 元素。因此，此概念的程式碼如下所示 -

import React from 'react';
import { isElement } from 'react-dom/test-utils';

// Define the App Component here
function App () {

   // Function to show the isElement() method
   function func() {
      var a = isElement(el);
      console.log("The Following is an element :", a);
   }   
   const el = <div>
      <h1>element</h1>
   </div>
   
   // Our JSX code
   return <>
      <div>
         <h1>Tutorialspoint</h1>
         <button onClick={func}>Click Me !!</button>
      </div>
   </>
}

// Export our App Component
export default App;

輸出

在上面的程式碼中，我們有一個元件，當我們點選“點選我！”按鈕時，它會驗證 someElement 是否是 React 元素。結果顯示在控制檯中。

示例 - 檢查 DOM 元素

此應用程式演示如何使用 React.isValidElement() 方法來查詢特定 JSX 元素（在本例中為 <div>）是否為有效的 React 元素。然後在元件中顯示結果，提供對元素性質的簡單檢查。此應用程式的程式碼如下所示 -

import React from 'react';

const App = () => {
const divElement = <div>Hello, I'm a div element!</div>;
const isReactElement = React.isValidElement(divElement);
   return (
      <div>
         <p>Checking if a DOM element is a React element:</p>
         {isReactElement ? (
            <p>Yes, the element is a React element!</p>
         ) : (
            <p>No, the element is not a React element.</p>
         )}
      </div>
   );
};

export default App;

輸出

在上面的示例中，我們可以看到 div 是一個 DOM 元素，因此結果為 true，因此它將列印“是的，該元素是 React 元素！”，如果我們給出一個非 DOM 元素，那麼它將列印 false 語句。

示例 - 檢查函式元件

此應用程式演示如何使用 React.isValidElement() 方法來檢查元件 'MyComponent' 類是否為有效的 React 元素。然後在元件中顯示結果，提供對元素型別的簡單檢查。

import React from 'react';

class MyComponent extends React.Component {
   render() {
      return <div>Hello, I'm a React component!</div>;
   }
}
const App = () => {
   const elementToCheck = <MyComponent />;
   const isReactElement = React.isValidElement(elementToCheck);
   
   return (
      <div>
         <p>Checking if a component is a React element:</p>
         {isReactElement ? (
            <p>Yes, the element is a React component!</p>
         ) : (
            <p>No, the element is not a React component.</p>
         )}
      </div>
   );
};

export default App;

輸出

因此，根據上述輸出，我們可以說，如果元件是 React 元素，則它將顯示 yes 訊息，否則它將顯示 No，它不是 React 元素。

總結

因此，React 中的 isElement() 函式用於確定給定物件是否為有效的 React 元素。如果元素引數是任何 React 元素，則返回 true；否則，返回 false。此函式通常用於 React 元件中的型別檢查和驗證，以確保輸入是有效的元素。