React 中的 ReactDOM 渲染

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

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

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

該 props 的價值將是一個函式。React 有兩種型別的渲染，即 render 和 ReactDOM.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 為 app 的 div。

# 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 元件。使用這些簡單的步驟，我們可以輕鬆地在另一個元件中渲染任何 React 元件。