无法在 React 中导入类答案

【问题标题】：Cannot import class in React无法在 React 中导入类
【发布时间】：2018-09-28 11:06:10
【问题描述】：

我有两个反应文件如下。它们在同一个文件夹中。但它不起作用。

Game.js

import { Board } from 'Board';

class Game extends React.Component {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
      </div>
    );
  }
}

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

在 Board.js

class Board extends React.Component {
  render() {
    return (
      <div>Test</div>
    );
  }
}
export { Board };

我的项目中有以下cdn。

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dnd@2.4.0/dist/ReactDnD.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dnd-html5-backend@2.4.1/dist/ReactDnDHTML5Backend.min.js"></script>
    <script crossorigin src="https://unpkg.com/prop-types@15.5.10/prop-types.min.js"></script>

我无法运行该项目，因为它显示错误

react.js:1 Uncaught ReferenceError: require is not defined

Check this image

【问题讨论】：

将export { Board }; 替换为export default Board 并通过import Board from 'Board'; 导入
Do I need require js when I use babel?的可能重复
{} 用于仅导入某些特定导出时，在您的情况下，您创建了一个单独的文件，因此您肯定只创建了一个类 Board
你用的是什么构建工具？webpack 还是别的？
@RIYAJKHAN 我不知道我是否在使用任何构建工具。我只是使用cdn和文本编辑器

标签： javascript reactjs

【解决方案1】：

像这样导入Board。

import { Board } from './Board';

或者在Board.js中导出这样的组件。

export default Board ;

像这样在Game.js中导入

import Board from './Board';

【讨论】：

发布更多日志
添加 {} 大括号，因为您正在使用 export{}
在board.js 中，您正在像export { Board }; 这样导出，这就是为什么，如果您像export default Board ; 那样导出，则不需要{}
我想这应该可以正常工作，就像@AmruthLS 说的那样，检查一下stackblitz.com/edit/react-7zmwsa，但你仍然面临这个问题，那么问题在于你的构建工具
对于一个简单的工作演示，引用 cdn 并在单个 html 中工作就可以了，以后您可能会将大量文件如 es6 转换为 es5。为此，我们使用 webpack、babel、grunt 等工具，如果您在配置时遗漏了某些内容，将会出现问题

【解决方案2】：

在您的 Board 组件 (Board.js) 中，您可以执行以下操作：

export class Board extends React.Component {
  // code 
}

在您的 Game 组件 (Game.js) 中，通过执行以下操作导入它：

import { Board } from './Board';

【讨论】：

你在使用像 Webpack 这样的打包工具吗？如果没有，请参阅此post
没有。即使在使用 cdn 时也需要它吗？