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 组件
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;
// 渲染 React 组件的函数
function render(element) {
   const container = document.createElement('div');
   ReactDOM.render(element, container);
   
   return {
      getInstance: () => container.firstChild,
   };
}

// 角色列表
const characters = ['Ankit', 'Babita', 'Chetan'];

// 使用 React 渲染角色
const testRenderer = render(<CharacterList characters={characters} />);

// 使用 testRenderer.getInstance() 获取详细信息
const characterListInstance = testRenderer.getInstance();

// 显示有关根元素的信息
console.log(`Details about CharacterList: `, characterListInstance);

输出

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

示例 −计数器应用

在此应用中，计数器组件渲染带有递增和递减按钮的计数器。我们将使用 testRenderer.getInstance() 与渲染的组件进行交互，模拟单击递增按钮。因此，此应用的代码如下 −

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

// 计数器组件
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;
// 渲染 React 组件的函数
function render(element) {
   const container = document.createElement('div');
   ReactDOM.render(element, container);
   
   return {
      getInstance: () => container.firstChild,
   };
}

// 使用 React 渲染 Counter 组件
const testRenderer = render(<Counter />);

// 与计数器交互
testRenderer.getInstance().querySelector('button').click();

// 使用 testRenderer.getInstance()
const counterInstance = testRenderer.getInstance();

// 显示有关根元素的信息
console.log(`Details about Counter: `, counterInstance);