Question

所以我一直在学习关于 React 的第一堂课，并尝试我的代码以了解它是如何工作的，但是在代码笔中我的代码正在运行，但在 VS 代码中不是。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Basic-React</title>
</head>
<body>
    <div id="root">not rendered</div>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <script>
        // Your custom js code goes here
        const App = () => {
            return React.createElement(
                "div",
                {},
                React.createElement("h1",{}, "Adopt-me")
            )
        }

        ReactDOM.render(<h1>Karan</h1>, document.getElementById('root'))
        // ReactDOM.render(React.createElement(App), document.getElementById("root"))
    </script>
</body>
</html>

我的 ReacDOM.render 调用在浏览器上给出了一个错误： index.html:25 Uncaught SyntaxError: Unexpected token '<'

但是如果在 codepen 中运行此代码或使用 node 说正确的 react-package 安装，它正在运行为什么？

Answer 1

您嵌入在 html 中的脚本标记正在运行本机 javascript。您需要 jsx 支持才能编写类似

<h1>Karan</h1>

在 JavaScript 中。使用 babel 将 jsx 转成 javascript。

Answer 2

const element = <h1>Karan</h1>;
ReactDOM.render(element, document.getElementById('root'));

渲染不喜欢<>;)

或

ReactDOM.render("<h1>Karan</h1>", document.getElementById('root'));

ReactDOM 不呈现简单的 h1 元素

2 个答案: