根据以下代码封装到react中请给出代码示例和如何使用

以下是一个简单的示例代码，展示如何将给定的代码封装到React组件中并使用：

import React from 'react';

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

  componentDidMount() {
    document.addEventListener('click', this.handleClick);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.handleClick);
  }

  handleClick = () => {
    this.setState(prevState => ({
      count: prevState.count + 1
    }));
  };

  render() {
    return (
      <div>
        <p>Click count: {this.state.count}</p>
      </div>
    );
  }
}

export default MyComponent;

现在，你可以在其他地方使用这个封装好的React组件：

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

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

export default App;

在上述示例中，MyComponent 是一个封装了给定代码的React组件。它在渲染时会创建一个初始计数器，并在组件挂载和卸载时添加和移除点击事件监听器。每次点击事件发生时，计数器会自增，并通过组件状态更新反映在DOM中。在App 组件中，我们可以简单地将MyComponent 作为一个子组件使用，像使用其他React组件一样