React bileşenlerinize polimorfizm eklemek, tüketicilerin DOM.

Bu bileşenleri oluştururken izlenecek önemli adımlar var, o yüzden başlayalım!

Neden polimorfik bileşenlere ihtiyacımız var?

( Material UI veya Chakra UI ) gibi bazı kitaplıklarda bazı bileşenlerin asveya prop'a izin verme seçeneğinin olduğunu fark etmiş olabilirsiniz elementType. Bu, özelleştirme için önemlidir, ancak bileşenlerimizi işlerken HTML semantik öğelerini kullanmamıza izin vererek erişilebilirliği geliştirmek için de önemlidir.

asBir React bileşenine prop ekleme

TextBu kitaplıklara benzer bir şeyi nasıl uygulayabileceğimizi görelim — basit bir React bileşeniyle başlayacağız .

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>

Tıkır tıkır çalışıyor! Ah, ama bekle…

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

      
                

                    
                    
                
            

İşte TypeScript geliyor

En iyi arkadaşımız TypeScript burada devreye giriyor.

TextGeliştirme sürecinde statik olarak kontrol edilebilmeleri için bileşen desteklerinin güçlü bir şekilde yazıldığından emin olmamız gerekir .

Plan, aspervanemizin herhangi bir geçerli HTML öğesini kabul etmesine izin vermek ve ardından aynı öğeye dayalı olarak hangi HTML niteliklerinin geçerli olduğunu bir şekilde belirlemektir (örneğin, bir aetiket, hrefözniteliğe izin vermelidir).

Türlerimizi oluşturmak

asPervane için bir tip ayarlayarak başlayalım .

import { ElementType } from "react";

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

Bizim türümüz, React'ten Tuzanan türlerle, ElementTypeyani herhangi bir geçerli HTML öğesiyle sınırlıdır.

import { ComponentPropsWithoutRef } from "react";

ComponentPropsWithoutRef<T>

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

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

Kombine türlerimiz şöyle görünmelidir:

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

Sonunda TextPropsihtiyacımız olan her şeye sahip Text! Her şeyi bir araya getirelim ve türü Textbileşenimize ekleyelim:

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

Kurulumumuzla ilgili en iyi şey, artık ...restgüçlü bir şekilde yazılmış olmasıdır.

Yani bu çalışması gerekir:

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

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