有条件地在组件内渲染组件答案

【问题标题】：Conditionally rendering component inside component有条件地在组件内渲染组件
【发布时间】：2022-07-23 00:27:53
【问题描述】：

在一个 React 项目中，我有 Itinerary.tsx、ItineraryDetails.tsx、Description.tsx、Weather.tsx 和 WeatherDetails.tsx 组件。

在Itinerary.tsx里面我有这样的东西：

<ItineraryDetails>
 <Description/>
</ItineraryDetails>

在Weather.tsx里面我有这样的东西：

<WeatherDetails>
 <Description/>
</WeatherDetails>

在Description.tsx 内部，我还有其他几个元素和一个链接，位于徽章前：

      <Link>
      </Link>
      <Badge>
      </Badge>

由于Itinerary.tsx 和Weather.tsx 的链接之外的所有内容都相同，我是否可以同时使用Description.tsx 并仅在Itinerary.tsx 中以某种方式有条件地呈现链接？还是创建 2 个“描述”更好？我认为拥有 2 个如此相似的组件是一种浪费，而且一旦您需要进行更改，它就不实用了。

由于html元素的顺序，我不能只在ItineraryDetails之后或Description之前添加链接（链接应该出现在徽章之前）。

【问题讨论】：

标签： reactjs components

【解决方案1】：

您可以将属性传递给Description 组件：

{this.props.showLink && <Link></Link>}
<Badge></Badge>

然后像这样使用它：

<ItineraryDetails>
 <Description showLink />
</ItineraryDetails>
<WeatherDetails>
 <Description/>
</WeatherDetails>

【讨论】：