Reactjs 为React中的所有html标记创建自定义组件

我有一个问题要问那些有经验的家伙，他们用React制作了可共享的组件。为每个现有html标记创建自定义react组件是否合理？我的意思是，例如，如果我可以使用一个html

div

，那么创建我自己的自定义

是否有一些好处，比如说，它可以获得一些特定的参数作为道具（样式等）

可能对

div

没有多大意义，因为它只是一个通用容器。但是对于像

h1，h2…

和链接这样的排版标签，这可能是一个好主意。如果设计是一致的，这可以帮助您使代码更干净。但当然，一切都取决于项目。

可能会迟到，但我目前正在设计一个像你所描述的那样的系统。我认为更高阶的组件将是实现这一目标的方法。这是我实施的系统的开始

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";

函数样式（attr）{
常量背景={
初级：“蓝色”，
...
}
常量颜色={…}
常数大小={
填充：{…}，
...
}
返回{
背景：背景[属性背景]| |未定义，
颜色：颜色[属性颜色]| |未定义，
尺寸：{
填充：大小。填充[attr.size]| |未定义，
边界半径：大小。边界半径[attr.size]| |未定义
}
}
}
export const Tag=Tag=>React.memo（props=>{
常量标记=标记
常量主题=样式（道具）
返回(
{props.children}
)
})
导出常量节=标记（“节”）；
Section.displayName=“Section”；
export const Article=标记（“Article”）；
Article.displayName=“Article”；
export const Header=标记（'Header'）；
Header.displayName=“Header”；
export const Footer=标记（'Footer'）；
Footer.displayName=“Footer”；
导出常量Span=Tag（'Span'）；
Span.displayName=“Span”；
导出常量Strong=标记（'Strong'）；
Strong.displayName=“Strong”；
导出常量Div=Tag（'Div'）；
Div.displayName=“Div”；
导出常量Em=标记（'Em'）；
Em.displayName=“Em”；
导出常数Ul=标签（'Ul'）；
Ul.displayName=“Ul”；
export const Li=标记（'Li'）；
Li.displayName=“Li”；
导出常数H1=标记（'H1'）；
H1.displayName=“H1”；
导出常数H2=标记（'H2'）；
H2.displayName=“H2”；
导出常量H3=标记（'H3'）；
H3.displayName=“H3”；
导出常数H4=标记（'H4'）；
H4.displayName=“H4”；
出口常数H5=标签（'H5'）；
H5.displayName=“H5”；
导出常数H6=标记（'H6'）；
H6.displayName=“H6”；
导出常数P=标记（'P'）；
P.displayName=“P”；

几乎任何可以添加到自定义组件中的内容，都可以在不将其作为React组件的情况下完成。我不认为创建自定义组件可以解决任何问题，就像其他任何事情一样，这取决于您试图做什么。。。如果你只是想添加样式，请使用css，这就是它的真正用途。谢谢你的评论。创建一个组件

并传递一个标记名作为道具，这样我基本上就可以/覆盖所有html元素了，怎么样？

组件决定应该呈现哪个组件？像

而不是仅仅使用

？对我来说，这似乎是不必要的复杂性，所以我不会这么做。是的，正如你所描述的。我只会使用单独的组件，如

，…