Блог

У меня следующий состав компонентов:

 <Badge.Ribbon text={ribbonText}>
      <Card className={'userCard'}
            hoverable
      >
        Some Data
      </Card>
</Badge.Ribbon>
  

Я хочу показать Badge.Ribbon компонент только в том случае ribbonText , если он не равен нулю. Это означает, что при ribbonText значении null я не хочу использовать Badge.Ribbon родительский компонент (который искажает весь компонент).

Каков идеальный способ в React справиться с этим?

Единственное решение, которое приходит мне в голову, — это создать новый компонент для каждой карты, например someCard , ribonnedCard для карт с лентой, но мне интересно, есть ли другое решение без создания нового компонента для каждого варианта использования.

Спасибо!

 let result = (
    <Card
        className='userCard'
        hoverable
    >
        Some Data
    </Card>
);

if (ribbonText !== null) {
    result = (
        <Badge.Ribbon text={ribbonText}>
            {result}
        </Badge.Ribbon>
    );
}
  

Создание оболочки сделало бы трюк:

 const wrapper = (condition, child) => condition ? <Wrapper>{child}</Wrapper> : child;
  

Это приведет к отображению обернутого Card внутри Badge.Ribbon , когда ribbonText значение не равно null.

 {ribbonText !== null ? (
  <Badge.Ribbon text={ribbonText}>
    <Card className={'userCard'} hoverable>
      Some Data
    </Card>
  </Badge.Ribbon>
) : (
  <Card className={'userCard'} hoverable>
    Some Data
  </Card>
)}
  

Кроме того, в зависимости от ваших требований вы можете просто проверить истинное значение ribbonText by {ribbonText ? <Component1/> : <Component2 />} .

Для className вы можете напрямую предоставить строку, подобную этой <Card className="userCard" hoverable>