ReactJS - isElementOfType()

React JS 是一個用於建立計算機應用程式的工具。它將程式分解成不同的部分，稱為元件。每個元件都有其自己的生命週期。React 提供了一些特殊的工具，可以在元件生命週期的特定點使用。

因此，我們將學習“isElementOfType()”工具。此工具檢查某物是否為 React 元件。如果是，則返回“true”。

語法

isElementOfType(
   element,
   componentClass
)

引數

• element − 要檢查的 React 元素，用於判斷其是否為 React 元素。

• componentClass − 要檢查的 React 元件型別。它就像對元件應該是什麼樣子的描述。

返回值

返回布林值。如果元素是具有 React componentClass 型別的 React 元素，則返回 true；否則返回 false。

示例

示例 -簡單的 React 應用

現在讓我們使用 isElementOfType 函式建立一個 React 應用。我們有一個名為“App”的 React 元件，其中包含一個按鈕。“checkElement”方法在單擊按鈕時被呼叫。此函式驗證 ID 為“myElement”的元素是否為型別為“MyComponent”的 React 元件，並在控制檯中記錄訊息。

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

// Define App Component
const App = () => {
   
   // Function to show isElementOfType()
   function checkElement() {
      
      // Get an HTML element by its ID
      var element = document.getElementById('myElement');
      
      // Check if the element is a React component
      var isReactComponent = isElementOfType(element, MyComponent);
      
      // Console the result
      console.log("Is the element a React component?", isReactComponent);
   }
   
   // Returning our JSX code
   return (
      <div>
         <h1>Simple React Example</h1>
         <button onClick={checkElement}>Check Element</button>
      </div>
   );
}

// Define a custom React component
function MyComponent() {
   return <p>This is a custom React component.</p>;
}

export default App;

輸出

示例 - 檢查 Header 元素

在這個例子中，我們將使用 isElementOfType 函式建立另一個 React 應用。我們有一個名為“App”的 React 元件，其中包含一個按鈕。當我們單擊按鈕時，“checkElement”方法被呼叫。此函式驗證 ID 為“headerElement”的元素是否為型別為“Header”的 React 元件，並將訊息記錄到控制檯。

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

// Define a React component
function Header() {
   return <h2>This is a header component.</h2>;
}

// Define App Component
const App = () => {
   
   // Function to show isElementOfType()
   function checkElement() {
      var element = document.getElementById('headerElement');      
      var isHeaderComponent = isElementOfType(element, Header);
      
      // Console the result
      console.log("Is the element a Header component?", isHeaderComponent);
   }
   
   // Returning our JSX code
   return (
      <div>
         <h1>React Component Example</h1>
         <button onClick={checkElement}>Check Header Element</button>
         <div id="headerElement">
            <Header />
         </div>
      </div>
   );
}

export default App;

輸出

示例 - 檢查 Paragraph 元素

在這個例子中，我們開發了一個基本的 Paragraph 元件，“checkElement”函式檢查 ID 為“paragraphElement”的元素是否為 Paragraph 型別並返回布林值。因此，此應用的程式碼如下所示：

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

// Define a React component
function Paragraph() {
   return <p>This is a paragraph component.</p>;
}

// Define App Component
const App = () => {
   
   // Function to show isElementOfType()
   function checkElement() {
      var element = document.getElementById('paragraphElement');   
      var isParagraphComponent = isElementOfType(element, Paragraph);
   
      // Console the result
      console.log("Is the element a Paragraph component?", isParagraphComponent);
   }
   
   // Returning our JSX code
   return (
      <div>
         <h1>React Component Example</h1>
         <button onClick={checkElement}>Check Paragraph Element</button>
         <div id="paragraphElement">
            <Paragraph />
         </div>
      </div>
   );
}

export default App;

輸出

總結

“isElementOfType()”方法確定給定元素是否為特定型別的 React 元件。在一個簡單的示例中，定義了一個名為“App”的帶有按鈕的 React 元件。當我們單擊按鈕時，它會分析具有特定 ID 的 HTML 元素是否為特定型別的 React 元件，並記錄其結果。