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

Bayangkan anda sedang membina yang boleh diguna semula komponen dengan React. Komponen Bahagian menjadikan HTML

tag kerana anda mengekodkannya. Walau bagaimanapun, dalam beberapa kes, anda mungkin mahu menggunakan teg lain sebaliknya, contohnya Teg HTML.

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!

typescript html for using this ide ui SEO

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn