Menambahkan polimorfisme ke komponen React Anda akan membuatnya lebih serbaguna karena konsumen akan dapat menentukan elemen yang dirender ke DOM.

Ada langkah-langkah penting yang harus diikuti saat membuat komponen ini, jadi mari kita mulai!

Mengapa kita membutuhkan komponen polimorfik?

Anda mungkin telah memperhatikan di beberapa pustaka seperti ( Material UI atau Chakra UI ) beberapa komponen memiliki opsi untuk mengizinkan asatau elementTypeprop. Ini penting untuk penyesuaian tetapi juga untuk meningkatkan aksesibilitas dengan memungkinkan kita menggunakan elemen semantik HTML saat merender komponen kita.

Menambahkan asprop ke komponen React

Mari kita lihat bagaimana kita bisa mengimplementasikan sesuatu yang mirip dengan pustaka ini — kita akan mulai dengan Textkomponen React yang sederhana.

const Text = ({ as, children, ...rest }) => {
  const Component = as || "span";

  return <Component {...rest}>{children}</Component>;
};

export default function App() {
  return <Text>Text goes here</Text>; // Will render a span by default
}

<Text as="main">Text goes here</Text>;
<Text as="p">Text goes here</Text>;
<Text as="section">Text goes here</Text>;
<Text as="a" href="www.example.com">Text goes here</Text>

Bekerja seperti pesona! Eh, tapi tunggu…

<Text as="p" href="www.example.com">
    Text goes here
</Text>

      
                

                    
                    
                
            

Ini dia TypeScript

Di sinilah sahabat kita TypeScript masuk.

Kita perlu memastikan bahwa Textprops komponen diketik dengan kuat sehingga dapat diperiksa secara statis selama proses pengembangan.

Rencananya adalah untuk memungkinkan asprop kami menerima elemen HTML yang valid dan kemudian entah bagaimana menentukan atribut HTML mana yang valid berdasarkan elemen yang sama (misalnya atag harus mengizinkan hrefatribut).

Membuat tipe kita

Mari kita mulai dengan menyiapkan tipe untuk asprop.

import { ElementType } from "react";

type AsProp<T extends ElementType> = {
  /**
   * The HTML element used for the root node.
   */
  as?: T;
};

Jenis kami Tdibatasi untuk jenis yang diperluas ElementTypedari Bereaksi, yaitu elemen HTML apa pun yang valid.

import { ComponentPropsWithoutRef } from "react";

ComponentPropsWithoutRef<T>

Omit<ComponentPropsWithoutRef<T>, keyof Props<T>>

Props<T> & Omit<ComponentPropsWithoutRef<T>, keyof Props<T>>

Jenis gabungan kami akan terlihat seperti ini:

type TextProps<T extends ElementType> = PropsWithChildren<AsProp<T>> &
  Omit<ComponentPropsWithoutRef<T>, keyof AsProp<T>>;

Akhirnya TextPropsmemiliki semua yang kita butuhkan Text! Mari satukan semuanya dan tambahkan tipe ke Textkomponen kita:

import {
  ElementType,
  ComponentPropsWithoutRef,
  PropsWithChildren
} from "react";

type AsProp<T extends ElementType> = {
  /**
   * The HTML element used for the root node.
   */
  as?: T;
};

type TextProps<T extends ElementType> = PropsWithChildren<AsProp<T>> &
  Omit<ComponentPropsWithoutRef<T>, keyof AsProp<T>>;

const Text = <T extends ElementType = "span">({
  as,
  children,
  ...rest
}: TextProps<T>) => {
  const Component = as || "span";

  return <Component {...rest}>{children}</Component>;
};

Hal terbaik tentang penyiapan kami adalah sekarang ...restjuga diketik dengan kuat.

Jadi ini harus bekerja:

<Text as="a" href="www.google.com">
   Text goes here
</Text>

<Text as="main" href="www.google.com">
   Text goes here
</Text>