为何传递React组件引用作为Prop优于传递组件实例？求场景示例

我正在寻找能体现传递React组件引用作为prop优于传递组件实例的场景案例，以下是两种Card组件的实现方式：

方式一：传递组件引用+props #

interface CardProps {
  cardContentComponent: React.FC<unknown>;
  cardContentComponentProps: Record<string, unknown>;
}

const Card: React.FC<CardProps> = ({
  cardContentComponent: CardContentComponent,
  cardContentComponentProps,
}) => {
  return (
    <div>
      <h3>Card Title</h3>
      <CardContentComponent {...cardContentComponentProps} />
    </div>
  );
};

export default Card;

使用方式：

const p = { text: "hi there" };

const App: React.FC = () => {
  return (
    <div>
      <Card cardContentComponent={CardContent} cardContentComponentProps={p} />
    </div>
  );
};

export default App;

CardContent定义：

interface CardContentProps {
  text: string;
}

const CardContent: React.FC<CardContentProps> = ({ text }) => {
  return (
    <div>
      Card Content {text}
    </div>
  );
};

export default CardContent;

方式二：传递组件实例 #

interface CardProps {
  cardContentComponent: React.ReactElement;
}

const Card: React.FC<CardProps> = ({ cardContentComponent }) => {
  return (
    <div>
      <h3>Card Title</h3>
      {cardContentComponent}
    </div>
  );
};

export default Card;

使用方式：

const App: React.FC = () => {
  return (
    <div>
      <Card cardContentComponent={<CardContent text="hi there" />} />
    </div>
  );
};

export default App;

我的问题是：为什么第一种方案要优于第二种？请给出具体场景示例。

1. 父组件需要向内容组件注入额外属性 #

假设Card组件内部有一个onContentClick回调，用来统计内容区域的点击行为，需要传递给内容组件。用组件引用的方式可以让Card自主封装这个逻辑，不需要上层组件介入：

改进后的Card组件（方式一） #

interface CardProps {
  cardContentComponent: React.FC<{ text: string; onContentClick?: () => void }>;
  cardContentComponentProps: Omit<Parameters<typeof cardContentComponent>[0], "onContentClick">;
}

const Card: React.FC<CardProps> = ({
  cardContentComponent: CardContentComponent,
  cardContentComponentProps,
}) => {
  const handleContentClick = () => {
    console.log("内容区域被点击，触发统计逻辑");
    // 可在此添加埋点、状态更新等内部逻辑
  };

  return (
    <div>
      <h3>Card Title</h3>
      <CardContentComponent 
        {...cardContentComponentProps} 
        onContentClick={handleContentClick} 
      />
    </div>
  );
};

使用时，App组件只需传递基础props，无需关心回调逻辑：

const App: React.FC = () => {
  return (
    <div>
      <Card 
        cardContentComponent={CardContent} 
        cardContentComponentProps={{ text: "hi there" }} 
      />
    </div>
  );
};

如果用传递实例的方式（方式二），回调必须由App组件提前绑定，Card组件失去了对内容组件的控制权，无法封装内部逻辑：

// 方式二的局限性：回调逻辑被迫暴露给上层组件
const App: React.FC = () => {
  const handleContentClick = () => {
    console.log("内容区域被点击，触发统计逻辑");
  };
  
  return (
    <div>
      <Card 
        cardContentComponent={<CardContent text="hi there" onContentClick={handleContentClick} />} 
      />
    </div>
  );
};

2. 内容组件需要响应父组件内部状态变化 #

假设Card组件有一个isExpanded状态，用来控制内容区域的展开/收起，需要传递给内容组件调整样式。用组件引用的方式可以实时同步状态变化：

方式一实现（同步内部状态） #

interface CardProps {
  cardContentComponent: React.FC<{ text: string; isExpanded: boolean }>;
  cardContentComponentProps: Omit<Parameters<typeof cardContentComponent>[0], "isExpanded">;
}

const Card: React.FC<CardProps> = ({
  cardContentComponent: CardContentComponent,
  cardContentComponentProps,
}) => {
  const [isExpanded, setIsExpanded] = React.useState(false);

  return (
    <div>
      <h3 onClick={() => setIsExpanded(!isExpanded)}>
        Card Title {isExpanded ? "↓" : "→"}
      </h3>
      <CardContentComponent 
        {...cardContentComponentProps} 
        isExpanded={isExpanded} 
      />
    </div>
  );
};

CardContent可根据状态调整样式：

const CardContent: React.FC<CardContentProps & { isExpanded: boolean }> = ({ text, isExpanded }) => {
  return (
    <div style={{ maxHeight: isExpanded ? "1000px" : "50px", overflow: "hidden", transition: "max-height 0.3s" }}>
      Card Content {text}
    </div>
  );
};

如果用方式二，提前创建的<CardContent>实例不会响应Card内部的isExpanded变化——因为实例在App组件渲染时就已固化，Card无法修改它的props：

// 方式二的问题：内部状态变化无法传递给已创建的实例
const Card: React.FC<CardProps> = ({ cardContentComponent }) => {
  const [isExpanded, setIsExpanded] = React.useState(false);

  // 无法修改cardContentComponent的props，只能原样渲染
  return (
    <div>
      <h3 onClick={() => setIsExpanded(!isExpanded)}>
        Card Title {isExpanded ? "↓" : "→"}
      </h3>
      {cardContentComponent} {/* 不会随isExpanded变化 */}
    </div>
  );
};

要解决这个问题，必须把isExpanded状态提升到App组件层级，违背了组件封装的原则。

3. 动态生成多个内容组件实例 #

假设Card组件需要根据内部列表数据，批量渲染多个内容组件实例。用组件引用的方式可以让Card自主处理数据逻辑：

方式一实现（批量渲染） #

interface CardProps {
  cardContentComponent: React.FC<{ item: { id: number; content: string } }>;
}

const Card: React.FC<CardProps> = ({
  cardContentComponent: CardContentComponent,
}) => {
  const [items] = React.useState([
    { id: 1, content: "Item 1" },
    { id: 2, content: "Item 2" },
    { id: 3, content: "Item 3" },
  ]);

  return (
    <div>
      <h3>Card Title</h3>
      <div className="content-list">
        {items.map(item => (
          <CardContentComponent key={item.id} item={item} />
        ))}
      </div>
    </div>
  );
};

使用时，App只需传递组件引用，Card负责内部数据的渲染：

const App: React.FC = () => {
  return (
    <div>
      <Card cardContentComponent={CardContent} />
    </div>
  );
};

如果用方式二，所有实例必须由App组件提前创建，Card组件退化成单纯的容器，无法封装数据逻辑：

// 方式二的问题：动态渲染逻辑被迫转移到上层组件
const App: React.FC = () => {
  const items = [
    { id: 1, content: "Item 1" },
    { id: 2, content: "Item 2" },
    { id: 3, content: "Item 3" },
  ];
  
  return (
    <div>
      <Card 
        cardContentComponent={
          <div className="content-list">
            {items.map(item => (
              <CardContent key={item.id} item={item} />
            ))}
          </div>
        } 
      />
    </div>
  );
};

内容的提问来源于stack exchange，提问作者yishayweb