如何在多个文件中使用组件时添加对网站的反应？

Question

我已经添加了从CDN的反应文件到我现有的网站，如医生的反应所描述的。

有什么方法可以将组件存储在不同的文件中并重用它们吗？可以使用import语句(当然，在普通的JS中不支持这些语句)。

下面是我试图做的事情的一个例子：

// ParentComponent.js

"use-strict";

import { ChildComponent } from "./ChildComponent"; // this causes an error

const e = React.createElement;

export class ParentComponent extends React.Component {
    child = e(ChildComponent, {}, "Some text to display")

    render() {
        return e("div", {}, child)
    }
}

在一个单独的文件里，

// ChildComponent.js

"use-strict";

const e = React.createElement;

export class ChildComponent extends React.Component {
    render() {
        return e("p", {}, props.children)
    }
}

作为参考，如果像下面这样使用导入语句，我将得到一个控制台错误：

import ChildComponent from "./ChildComponent";

SyntaxError:导入声明只能出现在模块的顶层

用最少的额外模块/框架/预处理程序就能实现这一点吗？

Answer 1

因此，为了回答我自己的问题，经过大量实验和搜索，要将其他JS文件作为“导入”包含，必须将它们作为<script>标记包含在HTML中：

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="/components/ChildComponent.js"><script>
<script src="/components/ParentComponent.js"><script>

或者，只需使用包含多个组件的单个JS文件即可。