React 渲染 HTML - 蝴蝶教程

定义和使用

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

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

注意，本教程 React 代码环境围绕 npm 的构建环境进行学习，如不懂可以先阅读 React 环境搭建这章进行了解学习

渲染功能

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

该功能的目的是在指定的 HTML 元素内显示指定的 HTML 代码。

在“根”元素内显示一个段落：

index.js：

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

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

index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

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

  </body>
</html>

运行结果如下：

HTML代码

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

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

下面创建一个包含 HTML 代码的变量，并将其显示在根节点中：

index.js：

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'));

运行结果如下：

根节点

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

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

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

根节点可以随意命名：

index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>

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

  </body>
</html>

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

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>Hallo 蝴蝶教程</h1>, document.getElementById('sandy'));

运行结果如下：