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

Imaginez que vous construisez une

composant avec React. Le composant Section affiche un fichier HTML

tag parce que vous l'avez codé en dur. Cependant, dans certains cas, vous souhaiterez peut-être utiliser une autre balise à la place, par exemple une balise

Balise HTML.

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!

typescript html for using this ide ui SEO

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn