Tag HTML Dinamik dalam Komponen React dengan prop \'as\'.-tutorial js-php.cn

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

Mary-Kate Olsen

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

asal

970 orang telah melayarinya

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

Salin selepas log masuk

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

}

Salin selepas log masuk

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

Dynamic HTML Tag in React Components with the

Sebagai alternatif kepada React.ElementType anda boleh gunakan

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

Salin selepas log masuk

atau

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

Salin selepas log masuk

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!