React 渲染 HTML

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

React 使用名为 ReactDOM.render() 的函数将 HTML 呈现到网页。

Render 渲染函数

ReactDOM.render() 函数接受两个参数，HTML 代码和一个 HTML 元素。

Render 函数的目的是在指定的 HTML 元素中显示指定的 HTML 代码。

但是在哪里渲染呢？

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

您会注意到一个 <div> 在该文件的正文中。这就是我们的 React 应用程序将被展示的地方。

实例

在 id 为 "root" 的元素内显示段落:

ReactDOM.render(<p>Hello</p>, document.getElementById('root'));

结果显示在 <div id=”root”> 元素中:

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));

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

HTML 代码

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

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

实例

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

import React from 'react';
import ReactDOM from 'react-dom';
const myelement = (
  <table>
    <tr>
      <th>Name</th>
    </tr>
    <tr>
      <td>John</td>
    </tr>
    <tr>
      <td>Elsa</td>
    </tr>
  </table>
);
ReactDOM.render(myelement, document.getElementById('root'));

Root 根节点

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

它就像 React 管理的内容的容器。

它不必是 <div> 元素，也不必具有 id='root':

实例

根节点可以任意调用:

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

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

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));

React 渲染 HTML

Render 渲染函数

实例

HTML 代码

实例

Root 根节点

实例

分类导航