javascript - 如何在 HTML 页面上使用 Hooks 渲染对 ID 的 react ？

Question

只是学习 React 的 hook 方面。类组件是有意义的，但是 Hooks 缺少渲染部分。

如果我将 React 添加到网页(不是创建 REACT 应用程序)，我如何让我的钩子(Hook)知道在 HTML 页面上运行的位置？

我正在尝试将代码放在以下内容中: <script src="react-hooks.js"></script>

这是我的钩子(Hook)代码:

import React, { useState } from 'react';

function Example() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click Me
            </button>
        </div>
    );
}

但是，在钩子(Hook)中没有地方可以在任何地方说这个。我试过这个:

const rootElement = document.getElementById("hook-section");
ReactDOM.render(<Example />, rootElement);

但我收到以下错误:

quote Uncaught SyntaxError: Cannot use import statement outside a module >quote

如果我更新脚本调用以包含 type="module" n 我得到以下信息:

quoteAccess to script at 'file:///C:/Users...react-hooks.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. index.html:44

quoteGET file:///C:/Users/.../react-hooks.js net::ERR_FAILED

类仍然可以正常工作，但钩子(Hook)不行。我在/src 文件中添加 js 文件，当我运行 babel 时，它会在根目录上创建另一个 js 版本。

我为此放弃了 React 文档。 https://reactjs.org/docs/add-react-to-a-website.html

第 1 步:Run npm init -y (if it fails, here’s a fix)

第 2 步:Run npm install babel-cli@6 babel-preset-react-app@3

npx babel --watch src --out-dir . --presets react-app/prod

Answer 1

更新

好的，所以解决方案是在 package.json 中设置 type=module，但现在您遇到了一个新问题，一个 CORS 错误。

您正在尝试从本地文件系统加载文件。你有在你的本地机器上运行的网络服务器吗？如果没有，您需要在本地设置一个基本服务器来修复 CORS 错误。或者，您可以通过 GitHub 等托管平台托管该项目。

---

确认您安装了最新版本的 Node。您可以更新您的节点版本:

nvm 安装 12.16.1

nvm 使用 12.16.1

不再需要 --experimental-modules 标志。只需执行以下操作之一:

将 "type": "module"添加到最近的父 package.json。这样，所有 .js 和 .mjs 文件都被解释为 ES 模块。

package.json

{
    "type":"module"
}

或

使用 .mjs 扩展名明确命名文件。所有其他文件，例如 .js 将被解释为 CommonJS，如果类型未在 package.json 中定义，则这是默认设置。

mv react-hooks.js react-hooks.mjs