React中如何复用Description组件并条件渲染内部链接？

完全不需要创建两个相似的Description组件，通过给组件添加一个控制属性即可实现按需渲染链接，同时保持链接在徽章前的位置要求，具体步骤如下：

1. 修改Description组件，添加控制属性
   给Description组件定义一个可选的布尔类型props（比如showLink），用于控制链接的显示与否，默认值设为false（适配Weather场景的默认需求）：

import { Link, Badge } from '你的UI组件库';

// 定义组件属性类型
interface DescriptionProps {
  showLink?: boolean;
}

const Description = ({ showLink = false }: DescriptionProps) => {
  return (
    <div className="description-container">
      {/* 条件渲染链接：仅当showLink为true时显示 */}
      {showLink && (
        <Link>
          {/* 你的链接内容 */}
        </Link>
      )}
      {/* 徽章始终显示，位置在链接之后（符合要求） */}
      <Badge>
        {/* 你的徽章内容 */}
      </Badge>
      {/* 以下是两个场景共享的其他内容 */}
      <p>共享文本内容1</p>
      <p>共享文本内容2</p>
    </div>
  );
};

export default Description;

2. 在不同场景中传入对应属性

• 在Itinerary.tsx中，传入showLink={true}来显示链接：

<ItineraryDetails>
  <Description showLink={true} />
</ItineraryDetails>

• 在Weather.tsx中，直接使用组件（默认showLink=false），不显示链接：

<WeatherDetails>
  <Description />
</WeatherDetails>

这种方式既满足了链接位置的要求，又完全复用了组件逻辑，后续修改共享内容或调整链接/徽章逻辑时，只需维护一个组件即可，避免了代码冗余。

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