React 中的 ReactDOM 渲染

Rana Hasnain Khan 2024年2月15日
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