如何在 html 中正确调用/渲染反应代码？

Question

我正在尝试使用 react 显示在 js 文件中编写的元素，这是 class：

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>
                <h:link outcome="main">Go to main page</h:link>
            </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>
    <script type="text/js" src="js/start.js"></script>
</head>
<body>

<div id="test"/>
</body>
</html>

但是启动时什么都没有，控制台中也没有错误信息，我做错了什么？

Answer 1

h:link不是有效的 HTML 元素，看起来它没有在任何地方定义。
render 中的StartPage必须是组件调用，所以改用这个 - <StartPage />

这是一个有效的 CodeSandbox - https://codesandbox.io/s/affectionate-williamson-xtxwn?file=/src/index.js

如何在 html 中正确调用/渲染反应代码？

问题描述

1 个解决方案

解决方案1
0 2020-11-29 02:11:13

如何在 html 中正确调用/渲染反应代码？

问题描述

1 个解决方案

解决方案1 0 2020-11-29 02:11:13

解决方案1
0 2020-11-29 02:11:13