ReactJS - isCompositeComponent()

React JS 的核心思想是將我們的應用程式分解成更小的元件，並且每個元件都有其自身的生命週期。React 提供了內建方法，我們可以在元件生命週期的不同階段使用這些方法。

在 React JS 中，isCompositeComponent() 方法主要用於檢查例項是否為使用者自定義元件。它幫助我們確定特定元素是開發者建立的自定義元件，還是系統內建元件。因此，我們可以說它幫助我們找出應用程式的特定部分是我們建立的元件，還是系統自帶的。

語法

isCompositeComponent(instance)

引數

instance − 這是我們要檢查的元素。此方法用於檢查元素或元件例項是否為使用者自定義元件。因此，我們可以檢查任何 React 元素或元件例項，以檢視它是否是自定義元件還是內建元件。

返回值

它返回一個布林值，如果提供的元素是使用者自定義元件，則返回 true，否則返回 false。

示例

示例 1

現在，我們將建立一個簡單的 React 應用，展示如何使用此方法。我們將建立一個名為 App 的基本元件，並在其中使用 isCompositeComponent()。

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

// Define App Component
const App = () => {

   // Function to show isCompositeComponent()
   function myFunction() {
      var a = isCompositeComponent(el);
      console.log("It is an element :", a);
   }   
   const el = <div>
   <h1>element</h1>
   </div>
   
   // Return our JSX code
   return (
      <div>
         <h1>React App to show isCompositeComponent method</h1>
         <button onClick={myFunction}>Click me !!</button>
      </div>
   );
}

export default App;

輸出

在程式碼中，我們看到一個名為“App”的簡單元件。“App”元件內有一個名為“myFunction”的函式，它使用 isCompositeComponent() 來判斷“el”元素是否為使用者自定義元件。當我們點選“Click me!!”按鈕時，結果將記錄在控制檯中。

示例 2

此應用程式包含一個名為 FunctionalComponent 的簡單函式式元件。主 App 元件渲染一個按鈕，當點選該按鈕時，它將使用 isCompositeComponent() 方法檢查 FunctionalComponent 是否為組合元件。

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

const FunctionalComponent = () => {
   return <div>Hello from FunctionalComponent!</div>;
};
const App = () => {
   function checkComponent() {
      const isComposite = isCompositeComponent(<FunctionalComponent />);
      console.log("Is FunctionalComponent a composite component?", isComposite);
   }   
   return (
      <div>
         <h1>React App to show isCompositeComponent method</h1>
         <button onClick={checkComponent}>Check FunctionalComponent</button>
      </div>
   );
};

export default App;

輸出

示例 3

此應用程式包含一個名為 ClassComponent 的簡單類元件。主 App 元件渲染一個按鈕，當點選該按鈕時，它將使用 isCompositeComponent() 方法檢查 ClassComponent 是否為組合元件。

import React, { Component } from 'react';
import { isCompositeComponent } from 'react-dom/test-utils';

class ClassComponent extends Component {
   render() {
      return <div>Hello from ClassComponent!</div>;
   }
}
const App = () => {
   function checkComponent() {
      const isComposite = isCompositeComponent(<ClassComponent />);
      console.log("Is ClassComponent a composite component?", isComposite);
   }   
   return (
      <div>
         <h1>React App to show isCompositeComponent method</h1>
         <button onClick={checkComponent}>Check ClassComponent</button>
      </div>
   );
};

export default App;

輸出

總結

isCompositeComponent() 方法可用於確定 React 應用的特定元素是否是使用者建立的元件。對於使用者自定義元素，它返回 true，否則返回 false。