React JS 错误：未定义“组件”

Question

我是 ReactJS 的初学者，我准备了以下文件：

应用程序.js

import React, { Component } from "react";
import "./App.css";
import InstructorApp from "./component/InstructorApp";

class App extends Component {
  render() {
    return (
      <div className="container">
        <InstructorApp />
      </div>
    );
  }
}

export default App;

列表课程组件.jsx

class ListCoursesComponent extends Component {
  render() {
    return (
      <div className="container">
        <h3>All Courses</h3>
        <div className="container">
          <table className="table">
            <thead>
              <tr>
                <th>Id</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Learn Full stack with Spring Boot and Angular</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

InstructorApp.jsx

class InstructorApp extends Component {
  render() {
    return (
      <>
        <h1>Instructor Application</h1>
        <ListCoursesComponent />
      </>
    );
  }
}

export default InstructorApp;

当我编译代码时，出现以下错误：

编译失败

./src/component/InstructorApp.jsx

第 1:29 行：未定义“组件” no-undef 第 4:7 行：使用 JSX react/react-in-jsx-scope 时，“React”必须在范围内 第 5:9 行：“React”必须在范围内当使用 JSX react/react-in-jsx-scope Line 6:9: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 6:10: 'ListCoursesComponent' is not defined react/jsx -no-undef

搜索关键字以了解有关每个错误的更多信息。

请如果有人可以帮助我，我会很高兴。

谢谢

Answer 1

您错过了Component从reactinInstructorApp和ListCoursesComponent组件导入的错误中提到的其他组件也应该从它们的位置导入，您的组件应该是这样的：

import React, { Component } from "react";
import ListCoursesComponent from './ListCoursesComponent.jsx';

class InstructorApp extends Component {
  render() {
    return (
      <>
        <h1>Instructor Application</h1>
        <ListCoursesComponent />
      </>
    );
  }
}
export default InstructorApp;

也是在ListCoursesComponent你错过了进口React，Component并出口语句：

import React, { Component } from "react";

class ListCoursesComponent extends Component {
  render() {
    return (
      <div className="container">
        <h3>All Courses</h3>
        <div className="container">
          <table className="table">
            <thead>
              <tr>
                <th>Id</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>Learn Full stack with Spring Boot and Angular</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

export default ListCoursesComponent;