在非 React 构建网站中导入 React 组件的正确方法是什么？答案

【问题标题】：What is the correct way of importing React Component in non-React build website?在非 React 构建网站中导入 React 组件的正确方法是什么？
【发布时间】：2021-11-14 00:17:27
【问题描述】：

我使用 Node、Express 构建了一个站点，并想添加一个使用 React 和 JSX 构建的页面。

我已经将 Babel 安装为 npm 包，并将 React 作为这样的脚本添加到 index.html 中：

<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 src="./js/Main.js"></script>

我的问题是如何正确地将子组件导入父组件。

假设我想导入 './components/Message.js' 像这样进入'Main.js'

function Main() {
    return (
        <div>
            <h1>Hello World</h1>
            <Message />
        </div>
    )
}

const renderDiv = document.getElementById('chat-module')
ReactDOM.render(<Main />, renderDiv)

为此，我需要将 Message.js 导入 Main.js 但 import Message from 'components/Message' 给出Uncaught SyntaxError: Cannot use import statement outside a module 错误。

到目前为止，我发现的唯一解决方案是将 Message.js 作为脚本添加到 index.html 中，并从 Main.js 作为 window.Message 调用它

这是唯一可用的解决方案，还是有更合适和更有效的方式来连接这些组件？

注意：提醒一下，我没有使用 npx create-react-app。这是使用 express 构建的现有应用。

【问题讨论】：

你试过<script type="module" src="./js/Main.js">吗？
参考：developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules
我正在尝试将消息导入 Main。我应该在哪里尝试该脚本 src？两者都是作为脚本的 React 组件
嗯，你的整个设置听起来很奇怪。这取决于您的用例，但实际上您应该使用已经安装的 babel 转换整个模块，然后再将其放到网站上。为此使用 webpack 或 rollup 或 parcel。
我已经安装了 babel 来使用 JSX。我不知道你提到的其他工具。一旦我完成了模块，我会调查它们。谢谢。

标签： javascript node.js reactjs react-native

【解决方案1】：

你试过<script type="module" src="./js/Main.js">吗？

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules

【讨论】：