有什么条件吗？ 将反应组件导入特定文件

Question

我有一个组件和两个 js 文件 index.js 和 App.js 我在将组件导入 index.js 时得到 output 但是当我将其导入 App.js 时屏幕上什么也没有。

下面是我在 App.js 文件中的代码。

import React, { Component } from "react";
import ReactDOM from "react-dom";
import ClassBased_count from "./Components/ClassBased_Count";
class Myclass extends Component {
render() {
return (
  <div>
    <ClassBased_count />
  </div>
);
}
}
ReactDOM.render(<Myclass />, document.getElementById("root"));

这是组件文件 ClassBased_Count.js

import React, { Component } from "react";

class ClassBased_count extends Component {
state = {
count: 0,
};
Increment = () => {
this.setState({ count: this.state.count + 1 });
};
Decrement = () => {
this.setState({ count: this.state.count - 1 });
};
Reset = () => {
this.setState({ count: 0 });
};
render() {
return (
  <div>
    <h1>{this.state.count}</h1>
    <button id="btn1" onClick={this.Increment}>
      Increase
    </button>
    <button id="btn2" onClick={this.Decrement}>
      Decrease
    </button>
    <button id="btn3" onClick={this.Reset}>
      Reset
    </button>
  </div>
 );
 }
 }
 export default ClassBased_count;

Answer 1

为了让您的代码以这种方式工作， index.js和App.js文件应如下所示：

index.js代码如下：

import { StrictMode } from "react";
import App from "./App";

export default App;

App.js代码如下：

import React, { Component } from "react";
import ClassBased_count from "./Components/ClassBased_count";

class Myclass extends Component {
  render() {
    return (
      <div>
        <ClassBased_count />
      </div>
    );
  }
}

export default Myclass;