ReactJS ReferenceError：未定义导出

Question

我一直在尝试建立一个基本的 ReactJS 项目，但没有取得多大成功，我有这三个文件：

[索引.html]

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>MarkEdit</title>
        <link rel="stylesheet" href="stylesheets/minireset.css"></link>
        <link rel="stylesheet" href="stylesheets/index.css"></link>
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
        <script type="text/babel" src="scripts/app.js"></script>
        <script type="text/babel" src="scripts/index.js"></script>
    </head>
    <body>
        <main id="application"></main>
    </body>
</html>

[脚本/app.js]

export default class App extends React.Component {
    render() {
        return (
            <h1>Hello, World!</h1>
        );
    }
}

[脚本/index.js]

ReactDOM.render(<App/>, document.getElementById("application"));

我一直收到这些错误：

ReferenceError: exports is not defined
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

所有文件都可用并通过 Golang 网络服务器提供。 我没有像 Webpack 这样的 JS 打包器，我想知道我目前做错了什么。 我试过import但我只是得到：

ReferenceError: import is not defined

感谢您的帮助！

Answer 1

你跟风一样吗？

[脚本/App.js]

import React from "react";
export default class App extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

[脚本/index.js]

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

const rootElement = document.getElementById("application");
ReactDOM.render(<App />, rootElement);

Answer 2

您忘记了导入，这些对于使用其功能很重要，否则会引用错误：“未定义导入”

尝试添加这个

import React from "react";

前

export default class App extends React.Component {
    render() {
        return (
            <h1>Hello, World!</h1>
        );
    }
}

在你的 index.js 文件中添加这个

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("application");
ReactDOM.render(<App />, rootElement);

ReactJS ReferenceError：未定义导出

问题描述

2 个解决方案

解决方案1
0 2020-01-07 03:18:52

解决方案2
0 已采纳 2020-01-07 06:33:58

ReactJS ReferenceError：未定义导出

问题描述

2 个解决方案

解决方案1 0 2020-01-07 03:18:52

解决方案2 0 已采纳 2020-01-07 06:33:58

解决方案1
0 2020-01-07 03:18:52

解决方案2
0 已采纳 2020-01-07 06:33:58