如何在ReactJS中实现组件复用

在ReactJS中，组件复用是提高开发效率和代码可维护性的关键。下面我们将讨论如何实现组件复用的几种常见方法。

1. 属性传递

function ParentComponent() {
  return (
    <div>
      <ChildComponent name="John" />
      <ChildComponent name="Jane" />
    </div>
  );
}

function ChildComponent(props) {
  return <div>Hello, {props.name}!</div>;
}

2. 高阶组件 (Higher-Order Components, HOC)

function withLogging(Component) {
  return function(props) {
    console.log('Logging:', props);
    return <Component {...props} />;
  }
}

const LoggedParentComponent = withLogging(ParentComponent);

3. Render Props

function MouseTracker(props) {
  return (
    <div>
      <h1>Mouse Tracker</h1>
      {props.render(mousePosition)}
    </div>
  );
}

function App() {
  return (
    <MouseTracker render={position => (
      <p>Mouse position: {position.x}, {position.y}</p>
    )} />
  );
}

4. 组合 (Composition)

function Card({ title, content }) {
  return (
    <div className="card">
      <h2 className="card-title">{title}</h2>
      <div className="card-content">{content}</div>
    </div>
  );
}

function App() {
  return (
    <div>
      <Card
        title="Card 1"
        content="This is the content of Card 1."
      />
      <Card
        title="Card 2"
        content="This is the content of Card 2."
      />
    </div>
  );
}

通过这些方法，我们可以在ReactJS项目中实现组件复用，提高代码的灵活性和可维护性。