浏览器中的javascript无法同时识别“导入”和JSX

Posted 2021-04-09

我正在尝试创建一个简单的React应用，该应用从components目录中导入组件。当前，这是我的文件夹结构：

main
|_components
|   |_FirstComponent.js
|_index.html

FirstComponent.js

export class FirstComponent extends React.Component{
    render(){
        return (
            <h1>Hello World</h1>
        )
    }
}

在index.html中，我有脚本加载react，react-dom和babel。到目前为止，这是我的JS代码：

<script type="module">
    import FirstComponent from "./components/FirstComponent.js";
</script>

哪个给我错误：Uncaught SyntaxError: Unexpected token '<'

这是JSX解析的错误，但是当我将脚本类型切换为text/babel时：

<script type="text/babel">
    import FirstComponent from "./components/FirstComponent.js";
</script>

我收到此错误：Inline Babel script:2 Uncaught ReferenceError: require is not defined

换句话说，如果类型是模块，浏览器将无法读取JSX，但是如果类型是babel，则浏览器将无法识别需求，也就是导入。

如何使浏览器正确加载组件？

答案

作为一种解决方法，您可以通过执行以下操作将FirstComponent导入到index.html页面：

<script type="text/babel" src="./components/FirstComponent.js"></script>

并且在FirstComponent.js中，删除导入和导出语句，以便文件仅具有FirstComponent类/功能组件。这会将类作为嵌入式babel脚本加载，您的组件将可以使用。您可以使用index.html底部的ReactDOM.render（）渲染组件。这是一个简单的解决方法。

FirstComponent.js

// No import statements
class FirstComponent extends React.Component{
    render(){
        return (
            <h1>Hello World</h1>
        )
    }
}
// No export default statement