如何在HTML中正确调用/渲染React代码？代码无显示排查

你遇到的页面无内容问题主要有几个关键错误，我来逐个拆解并给出修复方案：

1. ReactDOM.render 传入的是组件类而非实例 #

ReactDOM.render 需要接收一个组件实例，而不是组件类本身。你现在传的是StartPage，应该改成<StartPage />（JSX语法的实例），或者用React.createElement(StartPage)来创建实例。

2. 脚本类型错误 & 加载顺序问题 #

• 你的script标签里type="text/js"是错误的，标准JavaScript脚本类型是type="text/javascript"（其实现在可以省略这个属性，浏览器会默认识别）。
• 另外，你把start.js放在<head>里加载，此时React和ReactDOM还未加载完成，会导致代码找不到React对象。解决办法是把脚本移到<body>的末尾，或者给script标签加上defer属性，确保依赖库先加载完成。

3. React不支持JSF标签<h:link> #

React无法识别JSF的自定义标签<h:link>，如果你只是需要跳转链接，换成标准的<a>标签即可；如果是单页应用内的路由跳转，后续可以用React Router来实现。

修复后的完整代码 #

修正后的 start.js #

import React from 'react'
import ReactDOM from "react-dom";
const e = React.createElement;
class StartPage extends React.Component {
  render() {
    return(
      <div>
        <h2>...0</h2>
        <h3>...1</h3>
        <p>...3</p>
        <p>...2</p>
        <div id="current_date_time"></div>
        {/* 替换为标准HTML链接标签 */}
        <a href="/main">Go to main page</a>
      </div>
    )
  }
}
const domContainer = document.querySelector('#test');
// 传入组件实例而非类本身
ReactDOM.render(<StartPage />, domContainer);

修正后的 HTML 文件 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
  <div id="test"></div>
  <!-- 移到body末尾，确保依赖库已加载完成 -->
  <script type="text/javascript" src="js/start.js"></script>
</body>
</html>

额外补充：JSX编译问题 #

如果你的环境没有配置Webpack、Babel等工具，直接在浏览器里运行JSX代码可能会报错。你需要给start.js的script标签加上type="text/babel"，并引入Babel的CDN来解析JSX：

<!-- 在React脚本后添加Babel CDN -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- 修改start.js的script标签类型 -->
<script type="text/babel" src="js/start.js"></script>

内容的提问来源于stack exchange，提问作者Ckaf