如何优化反应排版组件？

Question

我有代码：

const H1 = ({style, children}) => {
    return <h1 className={styleMap[style]}>{children}</h1>
}

const H2 = ({style, children}) => {
    return <h2 className={styleMap[style]}>{children}</h2>
}

我的目标是减少重复代码，这样我就会有类似的东西：

const H{number} = ({style, children}) => {
        return <h{number} className={styleMap[style]}>{children}</h{number}>
    }

但我可以这样称呼它

<H1 style='style5'>Main Title</H1>
<H2 style='style2'>Subtitle</H2>

Answer 1

const H{number} = ({style, children}) => {
  return <h{number} className={styleMap[style]}>{children}</h{number}>
}

你想要的语法是不可能的。但是你可以通过传入一个道具来动态决定你想要哪个 header 级别。

function Header(props) {
  const { level, style, children } = props
  if (Number.isInteger(level) && level >= 1 && level <= 6) {
    return React.createElement(`h${level}`, { className: styleMap[style] }, children)
  } else {
    throw Error('Invalid "level" prop, must be number 1-6')
  }
}

// Usage:
<Header level={1} style='style5'>Main Title</Header>

你必须求助于普通的 JS React.createElement 语法，因为 JSX 不允许你为组件使用动态值，在 JSX 中写 <{whatever} /> 只是语法错误。

如何优化反应排版组件？

How to optimise react typography component?

react-component