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';

// 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>启科普</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 元素，所以结果是真的，所以它会打印“是的，该元素是一个 React 元素！”，如果我们给出一个非 DOM 元素，那么它将打印错误语句。

示例 - 检查函数组件

这个应用程序展示了如何使用 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 元素，那么它将显示“是”消息，否则它会说“否”，它不是 React 元素。

总结

因此，React 中的 isElement（） 函数用于确定给定对象是否是有效的 React 元素。如果 element 参数是任何 React 元素，则返回 true;否则，它将返回 false。此函数通常在 React 组件中用于类型检查和验证，以确保输入是有效的元素。