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