Tag HTML Dinamik dalam Komponen React dengan prop \'as\'.

Ini adalah senario biasa apabila anda mahu HTML anda menjadi lebih semantik dan mesra SEO.

Penyelesaiannya ialah membiarkan pengguna memutuskan teg HTML yang harus digunakan untuk memaparkan komponen.

Penyangga "sebagai".

Ini bukan perkara baharu.

Ini ialah "pendekatan" standard industri yang membolehkan anda menentukan secara dinamik teg HTML yang harus digunakan untuk memaparkan komponen. Banyak perpustakaan React Components menggunakannya, seperti UI Chakra dan UI Bahan.

Tanpa prop "sebagai", anda perlu membuat komponen berasingan untuk setiap kes penggunaan, dan ia tidak masuk akal. Jangan buat!

Beginilah cara anda menggunakan prop "sebagai"

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

Dan ini ialah definisi komponen

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

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

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

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

}

Sokongan Typescript untuk prop "sebagai".

React membantu kami dengan jenis Typescript.

Menggunakan jenis React.ElementType skrip taip, yang disediakan oleh React, anda akan memperoleh autolengkap untuk IDE anda, seperti ini

Sebagai alternatif kepada React.ElementType anda boleh gunakan

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

atau

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

Atas ialah kandungan terperinci Tag HTML Dinamik dalam Komponen React dengan prop \'as\'.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!