Conditionally rendering component inside component-CodePudding

In a React project, I have Itinerary.tsx, ItineraryDetails.tsx, Description.tsx, Weather.tsx and WeatherDetails.tsx components.

Inside Itinerary.tsx I have something like this:

<ItineraryDetails>
 <Description/>
</ItineraryDetails>

Inside Weather.tsx I have something like this:

<WeatherDetails>
 <Description/>
</WeatherDetails>

Inside Description.tsx I have several other elements and a link before a badge:

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

Since everything besides the link is the same for both Itinerary.tsx and Weather.tsx, can I use Description.tsx for both and somehow conditionally render the link only when inside Itinerary.tsx? Or is it better to create 2 "Descriptions"? I'm thinking that having 2 components so similar is a waste and it's not practical once you need to do changes.

I can't just add the link after ItineraryDetails or before Description because of the html elements' order (the link should appear before the badge).

CodePudding user response：

You could pass a property to the Description component:

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

And then use it like so:

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