Создание пользовательских компонентов для всех HTML-тегов в React

Question

У меня вопрос к опытным парням, которые сделали совместно используемые компоненты с React.Разумно ли создавать настраиваемые компоненты реакции для каждого существующего HTML-тега?Я имею в виду, например, если я могу использовать html div, есть ли какое-то преимущество в создании моего собственного <Div>, скажем, такого, который получит некоторые специфические параметры в качестве реквизита (стили и т. Д.)

Answer 1

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

function style (attr) {
  const background = {
    primary: 'blue',
    ...
  }

  const color = {...}

  const size = {
    padding: {...},
    ...
  }

  return {
    background: background[attr.background] || undefined,
    color: color[attr.color] || undefined,
    size: {
      padding: size.padding[attr.size] || undefined,
      borderRadius: size.borderRadius[attr.size] || undefined
    }
  }

}

export const Tag = tag => React.memo(props => {
  const Tag = tag
  const theme = style(props)
  return (
    <Tag
      className={classNames(
        tag,
        props.className,
        theme.background !== undefined ? `bg-${theme.background}`: '',
        theme.color !== undefined ? `text-${theme.color}`: '',
        theme.size.padding !== undefined ? `pad-${theme.size.padding}`: '',
        theme.size.borderRadius !== undefined ? `br-${theme.size.borderRadius}`: ''
      )}
    >
      {props.children}
    </Tag>
  )
})

export const Section = Tag('section');
Section.displayName = "Section";
export const Article = Tag('article');
Article.displayName = "Article";
export const Header = Tag('header');
Header.displayName = "Header";
export const Footer = Tag('footer');
Footer.displayName = "Footer";
export const Span = Tag('span');
Span.displayName = "Span";
export const Strong = Tag('strong');
Strong.displayName = "Strong";
export const Div = Tag('div');
Div.displayName = "Div";
export const Em = Tag('em');
Em.displayName = "Em";
export const Ul = Tag('ul');
Ul.displayName = "Ul";
export const Li = Tag('li');
Li.displayName = "Li";
export const H1 = Tag('h1');
H1.displayName = "H1";
export const H2 = Tag('h2');
H2.displayName = "H2";
export const H3 = Tag('h3');
H3.displayName = "H3";
export const H4 = Tag('h4');
H4.displayName = "H4";
export const H5 = Tag('h5');
H5.displayName = "H5";
export const H6 = Tag('h6');
H6.displayName = "H6";
export const P = Tag('p');
P.displayName = "P";

Answer 2

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