ReactJS - isElement()

React Js 库就是将应用程序拆分成各种组件。每个组件都有自己的生命周期。React 为我们提供了一些内置方法，我们可以在组件生命周期的特定阶段覆盖这些方法。

在本教程中，我们将了解如何使用 isElement() 方法。如果元素是 React 元素，则 isElement() 方法返回 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';

// 在此定义应用程序组件
function App () {

   // 显示 isElement() 方法的函数
   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 default App;

输出

在上面的代码中，我们有一个组件，当我们点击"Click Me!"按钮时，它会验证 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;