如何优化react排版组件

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}>
}

您想要的语法是不可能的。但你可以通过传递道具来动态地决定你想要的标题级别。

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>

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