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 元素渲染到其中。