react 类抽离组件

在 React 中，可以使用类抽离组件来将重复的逻辑和 UI 抽离出来，以便在多个地方重复使用。下面是一个示例：

首先，创建一个类组件，可以称为 `MyComponent`：

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return (
      <div>
        {/* 组件的 UI */}
      </div>
    );
  }
}

export default MyComponent;

然后，在需要使用这个组件的地方，可以通过导入并渲染 `MyComponent`：

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

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

export default App;

这样，`MyComponent` 组件就可以在 `App` 组件中使用了。你可以在其他地方也引入并使用它。

注意，类组件还可以接收属性（props）作为参数，以便根据不同的属性值来渲染不同的内容。你可以在 `MyComponent` 类组件中通过 `this.props` 来获取传递的属性值。例如：

import React from 'react';

class MyComponent extends React.Component {
  render() {
    const { name } = this.props;
    return (
      <div>
        <h2>Hello, {name}!</h2>
      </div>
    );
  }
}

export default MyComponent;

然后，在使用 `MyComponent` 组件时，可以通过属性传递 `name` 的值：

<MyComponent name="John" />

这样，`MyComponent` 组件就会显示 "Hello, John!"。