React-有条件地渲染组件内部的组件

Question

在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"；描述"？我认为拥有两个如此相似的组件是一种浪费，一旦你需要进行更改，它就不实用了。

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

Answer 1

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

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

然后像这样使用：

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