React渲染 HTML

React 的目标是通过多种方式在网页中呈现 HTML。

React 使用名为的函数将 HTML 渲染到网页createRoot()及其方法render()。

创建根函数

这个createRoot()函数接受一个参数，即一个 HTML 元素。

该函数的目的是定义应显示 React 组件的 HTML 元素。

渲染方法

这个render()然后调用方法来定义应该渲染的 React 组件。

但渲染在哪里呢？

React 项目的根目录中还有另一个文件夹，名为"public"。在这个文件夹中，有一个index.html文件。

你会注意到一个<div>在此文件的正文中。这是我们的 React 应用程序将被渲染的地方。

示例

在 id 为 "root" 的元素内显示一个段落：

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<p>Hello</p>);

结果显示在<div id="root">元素：

<body>
  <div id="root"></div>
</body>

运行示例 »

请注意，元素 id 不必称为"root"，但这是标准约定。

HTML 代码

本教程中的 HTML 代码使用 JSX，它允许您在 JavaScript 代码中编写 HTML 标签：

如果语法不熟悉，请不要担心，您将在下一章中了解有关 JSX 的更多信息。

示例

创建一个包含 HTML 代码的变量并将其显示在 "root" 节点中：

const myelement = (
  <table>
    <tr>
      <th>Name</th>
    </tr>
    <tr>
      <td>John</td>
    </tr>
    <tr>
      <td>Elsa</td>
    </tr>
  </table>
);

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(myelement);

运行示例 »

根节点

根节点是要在其中显示结果的 HTML 元素。

它就像一个容器对于由 React 管理的内容。

它不一定是<div>元素并且它不必具有id='root':

示例

根节点可以随意命名：

<body>

  <header id="sandy"></header>

</body>

将结果显示在<header id="sandy">元素：

const container = document.getElementById('sandy');
const root = ReactDOM.createRoot(container);
root.render(<p>Hallo</p>);

运行示例 »