Balise HTML dynamique dans les composants React avec la prop \'as\'

Il s'agit d'un scénario typique dans lequel vous souhaitez que votre code HTML soit plus sémantique et plus convivial pour le référencement.

La solution est de laisser le consommateur décider quelle balise HTML doit être utilisée pour restituer le composant.

L'accessoire "comme"

Ce n'est pas nouveau.

Il s'agit d'une « approche » standard de l'industrie qui vous permet de décider dynamiquement quelle balise HTML doit être utilisée pour restituer le composant. De nombreuses bibliothèques de composants React l'utilisent, comme Chakra UI et Material UI.

Sans l'accessoire "as", vous auriez besoin de créer des composants distincts pour chaque cas d'utilisation, et cela n'a aucun sens. Ne le fais pas !

C'est ainsi que vous consommez l'accessoire "en tant que"

import { Section } from './section';

const App = () => {
  return (
    <div>
      <Section as="section">CTA</Section>
      <Section as="article">My Article</Section>
      <Section>This use the default HTML tag of the component</Section>
    </div>
  );
};

Et voici la définition du composant

type SectionProps = {
  as?: React.ElementType,
  children: React.ReactNode,
}

export const Section = (props: SectionProps) => {

  const { as: Tag = 'div', children } = props;

  return <Tag>{children}</Tag>;

}

Prise en charge de Typescript pour l'accessoire "as"

React nous aide avec les types Typescript.

En utilisant le type React.ElementType du typescript, fourni par React, vous obtiendrez la saisie semi-automatique pour votre IDE, comme ceci

Comme alternative à React.ElementType, vous pouvez utiliser

type SectionProps = {
  as?: keyof JSX.IntrinsicElements,
  children: React.ReactNode,
}

ou

type SectionProps = {
  as?: keyof HTMLElementTagNameMap,
  children: React.ReactNode,
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!