时间戳

首页 > 解决方案 > 在非 React 构建网站中导入 React 组件的正确方法是什么？

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

问题描述

我用 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 构建的现有应用程序。

标签： javascriptnode.jsreactjsreact-native

解决方案

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

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

推荐阅读