react使用class封装组件进行使用

使用 class 封装 React 组件是一种传统的方法，它可以让开发者使用类似于面向对象编程的方式来构建组件。下面是一个使用 class 封装组件的示例：

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1>My Component</h1>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.handleClick()}>Click me</button>
      </div>
    );
  }
}

export default MyComponent;

在这个示例中，我们定义了一个名为 `MyComponent` 的类，它继承自 `Component`，并且包含了一个构造函数来初始化组件的状态。这个组件渲染了一个包含计数器和一个按钮的 div 元素，并且当按钮被点击时，计数器会加一。

我们可以像使用其他 React 组件一样来使用这个组件：

import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

export default App;

这个示例中，我们在 `App` 组件中使用了 `MyComponent` 组件，并将它包含在一个 div 元素中。

注意，在 class 中定义的方法需要使用 `this` 来访问组件的状态和属性，而在 JSX 中使用这些方法时需要使用箭头函数来绑定 `this`。