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 元件。
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