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