Question

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

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未捕获的ReferenceError：未定义require

Check this image

Answer 1

像这样导入Board。

import { Board } from './Board';

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

export default Board ;

在Game.js

中这样导入

import Board from './Board';

Answer 2

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

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

在您的 Game 组件（Game.js）中，通过执行以下操作将其导入：

import { Board } from './Board';

无法在React中导入类

2 个答案: