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 组件中的类型检查和验证，以确保输入是有效的元素。