Question

我有一个Main.js文件试图导入Head.js：import Head from './Head.js';

我已经尝试将其放在方括号中：import { Head } from...，并以各种方式引用./Head.js，删除.js或./。

在Head.js文件中，有一个Head类，并且将其相应地导出到每个站点所告诉的内容：export default Head;。

但是，当我删除import Head from './Head.js';并将Head.js代码粘贴到其顶部时，它可以工作，因此它应该不是代码中的错误，而是导出/导入中的错误。 / p>

有关更多详细信息，我使用Xampp在Windows 10中运行该站点。在我的项目文件夹中，我运行了 ReactJs告诉我的命令：

npm init -y
npm install babel-cli@6 babel-preset-react-app@3
npx babel --watch src --out-dir . --presets react-app/prod

带有一个/ src文件夹，我在其中编写JavaScript代码。

我的浏览器在控制台中给我这个错误：

SyntaxError: import declarations may only appear at top level of a module Main.js:9

我的html代码（index.php）：

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="utf-8">
        <title>TestFlix</title>
        <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>
        <link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>
        <link rel="stylesheet" href="css/styles.css"/>
    </head>
    <body>
        <div id="root"></div>
        <script src="Main.js"></script>
    </body>
</html>

我的Main.js：

import Head from './Head.js';

class Main extends React.Component {
    render() {
        return(
            <div>
                <h1>teste</h1>
                <Head />
            </div>
        );
    }
}

ReactDOM.render(<Main />,document.getElementById('root'));

我的Head.js：

class Head extends React.Component {
    render() {
        return(
            <h1>TEste</h1>
        );
    }
}

export default Head;

如何导入反应组件？

0 个答案: