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