Как правильно перечислить класс в шаблоне?

Question

[Evsand]

Как правильно перечислять классы если их > 1 ? Допустим если бы button была бы обернута в div и имела абзац p с уникальными классами ? Передавать в архиве или просто перечислять classNameDiv и т.д. ?

const Button = ({
  onClick,
  className = '',
  children,
}) =>
  <button
    onClick={onClick}
    className={className}
    type="button"
  >
    {children}
  </button>

Comments

[shmatuan]

button была бы обернута в div и имела абзац p

O.O

[Evsand]

shmatuan, ну так для примера )

[Сергей Попов]

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

[Evsand]

Сергей Попов, ну тут кнопка то понятно :) если мне список div ul li который я использую в нескольких местах ?

Answer 1

[Антон Спирин]

Это, пожалуй, наихудший путь которым только можно пойти.
Реализация компонента по-хорошему должна быть инкапсулирована, а вы должны работать с его интерфейсом.

<Button
  type="outline"
  size="sm"
  color="succes"
  disabled={isButtonDisabled}
  onClick={handleClick}
>
  Succes
</Button>

Answer 2

[abberati]

по-хорошему внутренние класснеймы компонентов должны быть зашиты внутри компонента, вот так:

const WrappedButton = ({
  onClick,
  rootClassName = '',
  children,
}) =>
  <div className={rootClassName}>
    <p className="some inner classname">
      <button
        onClick={onClick}
        className="another one classname"
         type="button"
      >
        {children}
      </button>
    </p>
  </div>

но никто не запретит вам передавать в пропсах хоть объект с класснеймами, хоть массив, хоть пятьдесят пропсов на каждый внутренний класснейм. если возникла такая необходимость, то, скорее всего, компонент написан плохо

Comments

[Evsand]

Спасибо за ответ, пересмотрю компонент мб и правда, написан плохо)

[Алексей Уколов]

если возникла такая необходимость, то, скорее всего, компонент написан плохо

Совсем необязательно. Это может быть библиотека общего назначения, например. Render props не всегда эффективны, иногда нужно просто поменять класс у какого-нибудь внутреннего элемента сложной библиотеки. Стилизация автокомплита приходит на ум, например.