React 中的 ReactDOM 渲染

Rana Hasnain Khan 2022年5月18日
React 中的 ReactDOM 渲染

我們將介紹什麼是 reactDOM.render 並使用它來渲染 React 應用程式中的 React 元件。

在 React 中使用 ReactDOM.render 渲染元件

首先,我們將討論 React 中的術語 render。術語 render 是指使用 prop 在 React 元件之間共享程式碼。

該 props 的價值將是一個函式。React 有兩種型別的渲染,即 renderReactDOM.render()

ReactDOM.render() 控制我們傳入的容器節點的內容。我們可以使用 ReactDom.render() 替換任何 DOM 元素的內容。它將我們的元件渲染到 DOM,而元件的渲染返回組成元件的元素。

讓我們舉個例子來了解如何使用 ReactDom.render() 渲染任何元件。

讓我們建立一個新的 React 應用程式並使用 ReactDom.render() 來渲染一個元件。我們將執行以下命令在 React 中建立一個新應用程式。

# react
npx create-react-app my-app

在 React 中建立我們的新應用程式後,我們將使用此命令轉到我們的應用程式目錄。

# react
cd my-app

現在,讓我們執行我們的應用程式來檢查所有依賴項是否安裝正確。

# react
npm start

現在,讓我們在我們的應用程式中建立一個新元件 renderedComponent.js,我們將在其中返回一個 HTML 元素。

# react
export default function RenderApp() {
  return <h1>I am Husnain</h1>;
}

建立元件後,我們將轉到 App.js 並匯入 ReactDOM 和我們剛剛建立的元件 RenderApp。並返回一個 ID 為 appdiv

# react
import "./styles.css";
import ReactDOM from "react-dom";
import RenderApp from "./renderedComponent.js";

export default function App() {
  return <div id="app"></div>;
}

現在,使用 ReactDom.render,我們將渲染元件 RenderApp

# react
ReactDOM.render(<RenderApp />, document.getElementById("app"));

輸出:

reactDOM.render 在 React 結果中

在上面的例子中,我們已經使用 ReactDom.render() 成功渲染了一個 React 元件。使用這些簡單的步驟,我們可以輕鬆地在另一個元件中渲染任何 React 元件。

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn

相關文章 - React ReactDOM