React 编译失败（未定义计数器）

Question

谁能帮忙解决这个错误：

编译失败。

./src/components/counters.jsx

第 9 行：“计数器”未定义 react/jsx-no-undef
第 10 行：“计数器”未定义 react/jsx-no-undef
第 11 行：“计数器”未定义 react/jsx-no-undef
第 12 行：'Counter' 未定义 react/jsx-no-undef

import React, { Component } from "react";

class Counter extends Component {
  state = {
    count: 0
  };

  handleIncrement = product => {
    console.log(product);
    this.setState({ count: this.state.count + 1 });
  };

  doHandleIncrement = () => {
    this.handleIncrement({ id: 1 });
  };

  render() {
    return (
      <div>
        <span className={this.getBadgeClasses()}>{this.formatCount()}</span>
        <button
          onClick={() => this.handleIncrement()}
          className="btn btn-secondary btn-sm"
        >
          Increment
        </button>
      </div>
    );
  }

  getBadgeClasses() {
    let classes = "badge m-2 badge-";
    classes += this.state.count === 0 ? "warning" : "primary";
    return classes;
  }

  formatCount() {
    const { count } = this.state;
    return count === 0 ? "Zero" : count;
  }
}

export default Counter;

---

另一个文件：-> -> index.js

---

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/bootstrap.css";
import Counter from "./components/counter";
import Counters from "./components/counters";

ReactDOM.render(<Counter />, document.getElementById("root"));

serviceWorker.unregister();

---

和其他文件 -> -> counters.jsx

---

import React, { Component } from "react";
import Counters from "./counter";

class Counters extends Component {
  state = {};
  render() {
    return (
      <div>
        <Counter />
        <Counter />
        <Counter />
        <Counter />
      </div>
    );
  }
}

export default Counters;

Answer 1

您在counters.jsx 的导入语句中有一个简单的错字：

import React, { Component } from "react";
import Counters from "./counter";

应该是

import React, { Component } from "react";
import Counter from "./counter";