Лучший способ обрабатывать аналогичные компоненты в ReactJS?

Question

Учтите, что в проекте есть два похожих компонента. Одна включает в себя только дополнительную кнопку, а другие функции абсолютно одинаковы. Каков наилучший способ создания этих компонентов? Я привел пример, который вы можете понять, что я имел в виду более четко Пример для аналогичных компонентов (пожалуйста, пропустите незначительные ошибки, такие как не использовать key props et c.) Конечно, пример может быть более сложным.

Некоторые решения, которые я подумал;

1- Я могу передать управление и использовать троичную операцию для рендеринга кнопки. (Я думаю, что это вызывает ненужные проверки)

2- Создать два отдельных компоненты (что я делал в примере). (Кажется, DRY)

3-HO C можно использовать, но я не могу понять это.

Если есть решение HO C или другое разумное, пожалуйста, поделитесь, заранее спасибо

Также я делюсь кодом;

const SelectionCard = ({ name }) => {
  return (
    <div className={classes.Card}>
      <h1>{name}</h1>
    </div>
  );
};

const AlmostSameCard = ({ name }) => {
  return (
    <div className={classes.Card}>
      <h1>{name}</h1>
      <button>{name}</button>
    </div>
  );
};

edit: Большинство ответов сосредоточены на примере, который я привел. Что мы должны делать в крайних случаях, таких как слишком много условий, огромные данные для рендера и т. Д. c.

Answer 1

Условные элементы

Компонент будет отображаться на основе пропущенных вами реквизитов. Вы должны визуализировать элементы, которые имеют смысл для этого компонента. Но убедитесь, что компонент не раздут от больших условных секций.

Ваш компонент карты может иметь дополнительные элементы, такие как дата, текст, метка, теги. Просто визуализируем части с содержанием.

const SelectionCard = ({ name, buttonText }) => {
  return (
    <div className={classes.Card}>
      <h1>{name}</h1>
      {buttonText && <button>{buttonText}</button>}
    </div>
  );
};