ReactJS - renderIntoDocument()

React 是一个强大的库，用于在 Web 开发的世界中创建用户界面。将 React 元素渲染到文档对象模型 (DOM) 是一个重要的过程。在本教程中，我们将了解 renderIntoDocument() 函数及其工作原理，并用简单的语言进行解释。

renderIntoDocument() 函数是 React 的一部分，负责在网页上显示 React 元素。它在文档中一个独立的空间中显示元素，与其余内容分开。

renderIntoDocument() 的主要目标是在网页上使 React 组件可见。当我们希望在文档的其余部分之外的单独区域显示 React 内容时，它特别有用。

语法

renderIntoDocument(element)

参数

element − 它是一个 React 元素，将渲染到文档中一个分离的 DOM 节点。

返回值

在 React 中，renderIntoDocument() 函数不会立即返回任何内容。但是，它执行一项任务：它将 React 元素转换为文档中的一个独立 DOM 节点。这意味着指定的 React 元素将显示在网页的特定区域。

示例

示例 - 显示计数器

在这个应用中，我们将显示一个计数器，它最初从 0 开始，并在 1 秒后更新为 1，因为我们将通过 1000 毫秒模拟它。所以这个应用的代码如下所示：

// Importing React and ReactDOM
import React from 'react';
import ReactDOM from 'react-dom';

// Creating a React element for a counter
const counterElement = <p>Count: 0</p>;

// Render the counter element into a detached DOM node
const domContainer = document.createElement('div');
ReactDOM.createRoot(domContainer).render(counterElement);
document.body.appendChild(domContainer);

// Update after 1 second
setTimeout(() => {
   const updatedCounterElement = <p>Count: 1</p>;
   ReactDOM.createRoot(domContainer).render(updatedCounterElement);
}, 1000);

输出

示例 - 创建一个简单的表单

在这个应用中，我们将使用 React JS 创建一个带有文本输入和提交按钮的简单表单。所以同样的代码如下所示：

// Importing React and ReactDOM
import React from 'react';
import ReactDOM from 'react-dom';

// Create a React element for a simple form
const formElement = (
   <form>
      <label>
         Name:
         <input type="text" />
      </label>
      <br />
      <button type="submit">Submit</button>
   </form>
);

// Render the form element into a detached DOM node
const domContainer = document.createElement('div');
ReactDOM.createRoot(domContainer).render(formElement);
document.body.appendChild(domContainer);

输出

示例 - 显示带有动态内容的列表

现在我们将创建一个应用，在这个应用中我们将显示项目的动态列表（最初是水果），并在 2 秒后更新列表以包含不同的水果。所以这个应用的代码如下所示：

// Importing React and ReactDOM
import React from 'react';
import ReactDOM from 'react-dom';

// Create a React element for a dynamic list
const items = ['Apple', 'Banana', 'Orange'];
const listElement = (
   <ul>
      {items.map((item, index) => (
         <li key={index}>{item}</li>
      ))}
   </ul>
);

// Render the list element into a detached DOM node
const domContainer = document.createElement('div');
ReactDOM.createRoot(domContainer).render(listElement);
document.body.appendChild(domContainer);

// Update after 2 seconds
setTimeout(() => {
   const updatedItems = ['Grapes', 'Kiwi', 'Mango'];
   const updatedListElement = (
      <ul>
         {updatedItems.map((item, index) => (
            <li key={index}>{item}</li>
         ))}
      </ul>
   );
   ReactDOM.createRoot(domContainer).render(updatedListElement);
}, 2000);

输出

注意

需要注意的是，为了使 renderIntoDocument() 正确工作，一些全局对象（如 window、window.document 和 window.document.createElement）应该可用。这确保了 React 可以访问 DOM 并执行渲染操作。

总结

我们已经了解了 renderIntoDocument() 方法的工作原理以及如何将其付诸实践。这需要一个文档对象模型 (DOM) 才能正常工作。它类似于一组特定的操作，其中创建了一个 DOM 容器，并使用 ReactDOM.createRoot().render() 将提供的 React 元素渲染到其中。