如何重用React组件，并且只有很小的变化？

// 父组件
import React from 'react';
import MyComponent from './MyComponent';

const ParentComponent = () => {
  const dataA = "Data A";
  const dataB = "Data B";

  return (
    <div>
      <MyComponent data={dataA} />
      <MyComponent data={dataB} />
    </div>
  );
};

// 子组件
import React from 'react';

const MyComponent = ({ data }) => {
  return (
    <div>
      <p>{data}</p>
      {/* 组件其他内容 */}
    </div>
  );
};

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  const handleDecrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
};

import React from 'react';

const withData = (WrappedComponent, data) => {
  return (props) => (
    <WrappedComponent {...props} data={data} />
  );
};

const MyComponent = ({ data }) => {
  return (
    <div>
      <p>{data}</p>
      {/* 组件其他内容 */}
    </div>
  );
};

const MyComponentWithDataA = withData(MyComponent, "Data A");
const MyComponentWithDataB = withData(MyComponent, "Data B");

// 使用高阶组件的两个新组件
const ParentComponent = () => {
  return (
    <div>
      <MyComponentWithDataA />
      <MyComponentWithDataB />
    </div>
  );
};