Блог

Все это один и тот же компонент, но с одним измененным словом. Как превратить его в 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'} />
 

что-то вроде

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

 

Вы всегда можете добавить реквизит в React.js:

 const Tab: React.FC<{subject:string}> = ({subject}) => (
  <Box>
    <h1>${subject} coming soon!</h1>
  </Box>
)

<Tab subject="Roles" />
<Tab subject="Training" />
<Tab subject="Hours" />
 

PS.: Вам не нужно использовать key s, если вы не создаете списки элементов.