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 毫秒为单位进行模拟。因此，此应用的代码如下 −

// 导入 React 和 ReactDOM
import React from 'react';
import ReactDOM from 'react-dom';

// 为计数器创建 React 元素
const counterElement = <p>Count: 0</p>;

// 将计数器元素渲染为分离的 DOM 节点
const domContainer = document.createElement('div');
ReactDOM.createRoot(domContainer).render(counterElement);
document.body.appendChild(domContainer);

// 1 秒后更新
setTimeout(() => {
   const updatedCounterElement = <p>Count: 1</p>;
   ReactDOM.createRoot(domContainer).render(updatedCounterElement);
}, 1000);

输出

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

在此应用中，我们将使用 React JS 创建一个简单的表单，其中包含一个文本输入和一个提交按钮。因此，其代码如下 −

// 导入 React 和 ReactDOM
import React from 'react';
import ReactDOM from 'react-dom';

// 为简单表单创建一个 React 元素
const formElement = (
   <form>
      <label>
         Name:
         <input type="text" />
      </label>
      <br />
      <button type="submit">Submit</button>
   </form>
);

// 将表单元素渲染为分离的 DOM 节点
const domContainer = document.createElement('div');
ReactDOM.createRoot(domContainer).render(formElement);
document.body.appendChild(domContainer);

输出

示例 − 显示包含动态内容的列表

现在我们将创建一个应用程序，其中我们将显示一个动态项目列表(最初是水果)，并在 2 秒后更新列表以包含不同的水果。因此，此应用程序的代码如下 −

// 导入 React 和 ReactDOM
import React from 'react';
import ReactDOM from 'react-dom';

// 为动态列表创建 React 元素
const items = ['Apple', 'Banana', 'Orange'];
const listElement = (
   <ul>
      {items.map((item, index) => (
         <li key={index}>{item}</li>
      ))}
   </ul>
);

// 将列表元素渲染为分离的 DOM 节点
const domContainer = document.createElement('div');
ReactDOM.createRoot(domContainer).render(listElement);
document.body.appendChild(domContainer);

// 2秒后更新
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 元素渲染到其中。

reactjs_reference_api.html