ReactJS - isDOMComponent()

---

---

ReactJS 就像一个面向 Web 开发人员的工具箱。它帮助他们通过将所有内容分解成称为组件的小部分来构建网站。每个组件都有自己的时间表，React 提供了开发人员在构建这些部分的不同时间可以使用的一些工具。

这些内置方法之一是 isDOMComponent() 方法。它检查给定的实例是否为 DOM 组件。因此，我们可以说，它可以帮助我们找到网页的一部分是否是一个基本的 HTML 元素，例如 <div> 或 <span>。

语法

isDOMComponent(instance)

参数

instance − 这是我们要检查是否为 DOM 组件的 React 元素的实例。它是我们要测试的元素。

返回值

isDOMComponent 函数返回 true 或 false 作为布尔值。

• true − 如果实例是 DOM 组件，例如 <div> 或 <span>。

• false − 如果实例不是 DOM 组件或是一个自定义的 React 组件。

示例

示例 - 检查 div 元素

让我们考虑一个简单的示例来了解 isDOMComponent() 的工作原理。因此，我们将创建一个简单的 App 组件，其中我们将有一个函数 checkIfDOMComponent()。在这个组件内部，我们使用 isDOMComponent() 来检查 elementToCheck 是否为 DOM 组件。然后，当点击按钮时，我们将显示结果。让我们看看代码 -

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

const App = () => {
   function checkIfDOMComponent() {
      const isDOM = isDOMComponent(elementToCheck);
      console.log("Is it a DOM component? " + isDOM);
   }   
   const elementToCheck = <div>Hello, I am a div element!</div>;   
   return (
      <div>
         <h1>React App</h1>
         <button onClick={checkIfDOMComponent}>Check Component</button>
         {elementToCheck}
      </div>
   );
}

export default App;

输出

示例 - 天气应用

此代码表示一个简单的 React 天气应用组件 (Weather.js) 和一个使用 @testing-library/react 库的相应测试文件 (Weather.test.js)。Weather 组件是一个函数式 React 组件，它使用 useState hook 来管理城市和温度的状态。getTemperature 函数被模拟以异步获取温度，为了简单起见，它生成一个随机温度。代码如下 -

Weather.js

import React, { useState } from 'react';

function Weather() {
   const [city, setCity] = useState('');
   const [temperature, setTemperature] = useState(null);   
   const getTemperature = async () => {
      const randomTemperature = Math.floor(Math.random() * 40) + 1;      
      setTemperature(randomTemperature);
   };
   
   return (
      <div>
         <h2>Weather App</h2>
         <div>
            <label htmlFor="cityInput">Enter City:</label>
            <input
               type="text"
               id="cityInput"
               value={city}
               onChange={(e) => setCity(e.target.value)}
            />
            <button onClick={getTemperature}>Get Temperature</button>
         </div>
         {temperature !== null && (
            <p>
               The temperature in {city} is {temperature}°C.
            </p>
         )}
      </div>
   );
}

export default Weather;

Weather.test.js

import React from 'react';
import { render, fireEvent, waitFor } from '@testing-library/react';
import Weather from './Weather';

test('renders weather component and fetches temperature', async () => {
   const { getByText, getByLabelText } = render(<Weather />);
   
   const cityInput = getByLabelText(/enter city/i);
   fireEvent.change(cityInput, { target: { value: 'New York' } });
   
   const getTemperatureButton = getByText(/get temperature/i);
   fireEvent.click(getTemperatureButton);
   
   await waitFor(() => {
      const temperatureElement = getByText(/the temperature in new york/i);
      expect(temperatureElement).toBeInTheDocument();
      expect(temperatureElement).toBeInstanceOf(HTMLElement); // Using isDOMComponent()
   });
});

输出

示例 - 图片库应用

此代码包含一个简单的 React 图片库组件 (ImageGallery.js) 和一个使用 @testing-library/react 库的相应测试文件 (ImageGallery.test.js)。测试通过确保每个图像元素都存在于文档中来检查 ImageGallery 组件是否正确渲染。它利用 @testing-library/react 中的 render 函数来创建用于测试的虚拟 DOM。此应用的代码如下 -

ImageGallery.js

import React, { useState } from 'react';

function ImageGallery() {
   const [images, setImages] = useState([
      'image1.jpg',
      'image2.jpg',
      'image3.jpg',
   ]);
   
   return (
      <div>
         <h2>Image Gallery</h2>
         <div>
            {images.map((image, index) => (
               <img key={index} src={image} alt={`Image ${index + 1}`} />
            ))}
         </div>
      </div>
   );
}

export default ImageGallery;

ImageGallery.test.js

import React from 'react';
import { render } from '@testing-library/react';
import ImageGallery from './ImageGallery';

test('renders image gallery component', () => {
   const { getByAltText } = render(<ImageGallery />);   
   for (let i = 1; i <= 3; i++) {
      const imageElement = getByAltText(`Image ${i}`);
      expect(imageElement).toBeInTheDocument();
      expect(imageElement).toBeInstanceOf(HTMLElement); // Using isDOMComponent()
   }
});

输出

总结

因此，每当我们调用 isDOMComponent(instance) 时，如果实例是 DOM 组件，它将返回 true，否则返回 false。此函数检查元素是标准 HTML 元素还是自定义的 React 组件。