reactjs - 可重用组件 React - 字符串作为道具

Question

这些都是相同的组成部分，但只改变了一个词。如何将其变成 1 个可重用组件？

const TabRoles: React.FC<{}> = () => (
  <Box>
    <h1>Roles coming soon!</h1>
  </Box>
)

const TabTraining: React.FC<{}> = () => (
  <Box>
    <h1>Training coming soon!</h1>
  </Box>
)

const TabHours: React.FC<{}> = () => (
  <Box>
    <h1>Hours coming soon!</h1>
  </Box>

这就是我目前调用 consts 的方式：

<TabRoles key={'volunteer_roles_tab'} />,
<TabHours key={'volunteer_hours_tab'} />,
<TabTraining key={'volunteer_training_tab'} />

标签： reactjs

Answer 1

就像是

const TabTitle: React.FC<{title: string}> = ({ title }) => (
  <Box>
    <h1>{title} coming soon!</h1>
  </Box>
)

<TabTitle key="volunteer_roles_tab" title="Roles" />
<TabTitle key="volunteer_training_tab" title="Training" />
<TabTitle key="volunteer_hours_tab" title="Hours" />