ReactJS - testRenderer.getInstance() 方法

本教程中我们将讨论的概念称为 testRenderer.getInstance()。

testRenderer.getInstance() 充当开发人员的调试工具。假设我们正在创建一个网站或应用程序，并且想要了解更多关于我们创建的关键组件——根元素的信息。此工具将帮助我们完成此任务。

简单来说，testRenderer.getInstance() 函数是一个帮助开发人员理解和检查他们正在创建的内容的主要组件的工具，但在处理由函数组件形成的对象时，它存在限制。

语法

testRenderer.getInstance()

参数

此方法不需要任何参数。当我们使用此方法时，不需要向其提供任何特殊指令或信息。

返回值

testRenderer.getInstance() 方法返回根元素的实例。简单来说，它提供了对开发人员正在创建的关键元素的深入了解或快照。

示例

示例

在此示例中，我们将有一个简单的应用程序，显示字符列表。要获取有关根元素（即 CharacterList 组件）的信息，我们将使用 testRenderer.getInstance()。出于说明目的，我们将使用简化的渲染函数。

import React from 'react';
import ReactDOM from 'react-dom';

// React component
function CharacterList({ characters }) {
   return (
      <div>
         <h1>List of Characters</h1>
         <ul>
            {characters && characters.map((character, index) => (
               <li key={index}>{character}</li>
            ))}
         </ul>
      </div>
   );
}
export default CharacterList;
// Function to render a React component
function render(element) {
   const container = document.createElement('div');
   ReactDOM.render(element, container);
   
   return {
      getInstance: () => container.firstChild,
   };
}

// list of characters
const characters = ['Ankit', 'Babita', 'Chetan'];

// Render the characters using React
const testRenderer = render(<CharacterList characters={characters} />);

// Use testRenderer.getInstance() to get details
const characterListInstance = testRenderer.getInstance();

// Display information about the root element
console.log(`Details about CharacterList: `, characterListInstance);

输出

因此，在运行应用程序后，我们可以在控制台中看到字符列表，并在列表中看到三个元素。

示例 - 计数器应用

在此应用程序中，Counter 组件呈现带有递增和递减按钮的计数器。我们将使用 testRenderer.getInstance() 与渲染的组件进行交互，模拟点击“递增”按钮。因此，此应用程序的代码如下所示：

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

// Counter component
function Counter() {
   const [count, setCount] = useState(0);
   
   const increment = () => {
      setCount(count + 1);
   };
   
   const decrement = () => {
      setCount(count - 1);
   };
   
   return (
      <div>
         <h1>Counter App</h1>
         <p>Count: {count}</p>
         <button onClick={increment}>Increment</button>
         <button onClick={decrement}>Decrement</button>
      </div>
   );
}

export default Counter;
// Function to render a React component
function render(element) {
   const container = document.createElement('div');
   ReactDOM.render(element, container);
   
   return {
      getInstance: () => container.firstChild,
   };
}

// Render the Counter component using React
const testRenderer = render(<Counter />);

// interacting with the counter
testRenderer.getInstance().querySelector('button').click();

// Use testRenderer.getInstance()
const counterInstance = testRenderer.getInstance();

// Display information about the root element
console.log(`Details about Counter: `, counterInstance);

输出

总结

因此，testRenderer.getInstance() 是一个开发人员工具，允许他们更详细地探索其项目的主要组件。它的功能类似于放大镜，尽管它无法从函数组件中收集字符。了解此概念有助于开发人员创建更有效率的网站和应用程序。