Dynamisches HTML-Tag in React Components mit der Requisite „as'.-js-Tutorial-php.cn

Dynamisches HTML-Tag in React Components mit der Requisite „as'.

Mary-Kate Olsen

Freigeben： 2024-11-25 03:08:26

Original

1038 Leute haben es durchsucht

Stellen Sie sich vor, Sie erstellen einen wiederverwendbaren Komponente mit React. Die Abschnittskomponente rendert ein HTML

Tag, weil Sie es fest codiert haben. In manchen Fällen möchten Sie jedoch möglicherweise stattdessen ein anderes Tag verwenden, beispielsweise

HTML-Tag.

Dies ist ein typisches Szenario, wenn Ihr HTML semantischer und SEO-freundlicher sein soll.

Die Lösung besteht darin, den Verbraucher entscheiden zu lassen, welches HTML-Tag zum Rendern der Komponente verwendet werden soll.

Die „as“-Requisite

Das ist nichts Neues.

Es handelt sich um einen branchenüblichen „Ansatz“, der es Ihnen ermöglicht, dynamisch zu entscheiden, welches HTML-Tag zum Rendern der Komponente verwendet werden soll. Viele React Components-Bibliotheken verwenden es, wie Chakra UI und Material UI.

Ohne die „as“-Requisite müssten Sie für jeden Anwendungsfall separate Komponenten erstellen, und das macht keinen Sinn. Tu es nicht!

So verwenden Sie die „as“-Requisite

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

Nach dem Login kopieren

Und das ist die Komponentendefinition

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

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

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

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

}

Nach dem Login kopieren

Typescript-Unterstützung für die „as“-Requisite

React hilft uns bei Typescript-Typen.

Mit dem von React bereitgestellten Typ React.ElementType des Typoskripts erhalten Sie eine automatische Vervollständigung für Ihre IDE, etwa so

Dynamic HTML Tag in React Components with the

Als Alternative zu React.ElementType können Sie
verwenden

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

Nach dem Login kopieren

oder

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDynamisches HTML-Tag in React Components mit der Requisite „as'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!