Ilchineálacht

Conas an prop `as` a úsáid chun an eilimint HTML a rindreáiltear a athrú agus feidhmiúlacht an chomhpháirte a chothabháil.

Is é an prop as pátrún bunúsach i leabharlanna comhdhéanamh React nua-aimseartha a ligeann duit an eilimint HTML bunúsach nó an chomhpháirt a bhfuiltear ag rindreáil a athrú.

Faoi léigear é ag leabharlanna mar Styled Components, Emotion, agus Chakra UI, tugann an pátrún seo solúbthacht maidir le HTML seimantúil a roghnú agus stíliú agus iompar an chomhpháirte a choinneáil.

Cuidíonn an prop as le comhpháirteanna ilchineálacha a chruthú - comhpháirteanna a bhféadfadh siad a rindreáil mar chineálacha eilimintí éagsúla agus iad ag coimeád a bhfeidhmiúlacht lárnacha:

<Button as="a" href="/home">
  Go Home
</Button>

<Button as="button" type="submit">
  Submit Form
</Button>

<Button as="div" role="button" tabIndex={0}>
  Custom Element
</Button>

Ag tuiscint `as`

Ligeann an prop as duit cineál eilimint réamhshocraithe chomhpháirte a shárú. In ionad a bheith greamaithe i ndiaidh eilimint áirithe HTML, is féidir leat an chomhpháirt a oiriúnú chun aon teg HTML bailí nó fiú comhpháirt React eile a rindreáil.

Mar shampla:

// Default renders as a div
<Box>Content</Box>

// Renders as a section
<Box as="section">Content</Box>

// Renders as a nav
<Box as="nav">Content</Box>

Seo a rindreálfaidh sé eilimintí HTML éagsúla:

<!-- Default -->
<div>Content</div>

<!-- With as="section" -->
<section>Content</section>

<!-- With as="nav" -->
<nav>Content</nav>

Modhanna Cur i bhfeidhm

Tá dhá chur chuige móra chun comhpháirteanna ilchineálacha a chur i bhfeidhm: cur i bhfeidhm láimhe agus ag baint úsáide as Slot ó Radix UI.

Cur i bhfeidhm láimhe

Úsáideann an cur i bhfeidhm an prop as rindreáil chomhpháirt dhinimiciúil:

// Simplified implementation
function Component({
  as: Element = 'div',
  children,
  ...props
}) {
  return <Element {...props}>{children}</Element>;
}

// More complete implementation with TypeScript
type PolymorphicProps<E extends React.ElementType> = {
  as?: E;
  children?: React.ReactNode;
} & React.ComponentPropsWithoutRef<E>;

function Component<E extends React.ElementType = 'div'>({
  as,
  children,
  ...props
}: PolymorphicProps<E>) {
  const Element = as || 'div';
  return <Element {...props}>{children}</Element>;
}

An chomhpháirt:

Glacann sé prop as le cineál eilimint réamhshocraithe
Úsáideann sé an eilimint a cuireadh ar fáil nó fillteann sé ar an réamhshocrú
Scaipeann sé na props eile go léir chuig an eilimint a rindreáiltear
Coinníonn sé sábháilteacht cineálach le ginearálacha TypeScript

Ag baint úsáide as `Slot` Radix UI

Cuireann Radix UI comhpháirt Slot ar fáil a thairgeann malairt níos cumhachtaí ar an bpátrún prop as. In ionad cineál an eilimint a athrú go simplí, déanann Slot props a chumasc leis an gcomhpháirt pháiste, rud a fhágann go bhfuil patrúin chomhdhéanamh indéanta.

Ar dtús, suiteáil an pacáiste:

npm install @radix-ui/react-slot

Úsáideann an patrún asChild prop boolean in áit cineál an eilimint a shonrú:

import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

const itemVariants = cva(
  "rounded-lg border p-4",
  {
    variants: {
      variant: {
        default: "bg-white",
        primary: "bg-blue-500 text-white",
      },
      size: {
        default: "h-10 px-4",
        sm: "h-8 px-3",
        lg: "h-12 px-6",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

function Item({
  className,
  variant = "default",
  size = "default",
  asChild = false,
  ...props
}: React.ComponentProps<"div"> &
  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : "div"
  return (
    <Comp
      data-slot="item"
      data-variant={variant}
      data-size={size}
      className={cn(itemVariants({ variant, size, className }))}
      {...props}
    />
  )
}

Anois is féidir é a úsáid ar dhá bhealach:

// Default: renders as a div
<Item variant="primary">Content</Item>

// With asChild: merges props with child component
<Item variant="primary" asChild>
  <a href="/home">Link with Item styles</a>
</Item>

An comhpháirt Slot:

Déanann sé cóip den eilimint pháiste
Cumascann sé props an chomhpháirte (className, airíonna data, srl.) le props an pháiste
Seolann sé refs ar aghaidh i gceart
Bainistíonn sé comhdhéanamh láimhseálaithe imeachtaí

Comparáid: `as` vs `asChild`

as prop (Cur i bhfeidhm láimhe):

// Explicit element type
<Button as="a" href="/home">Link Button</Button>
<Button as="button" type="submit">Submit Button</Button>

// Simple, predictable API
// Limited to element types

asChild le Slot:

// Implicit from child
<Button asChild>
  <a href="/home">Link Button</a>
</Button>

<Button asChild>
  <button type="submit">Submit Button</button>
</Button>

// More flexible composition
// Works with any component
// Better prop merging

Príomh-difríochtaí:

Gné	`as` prop	`asChild` + Slot
API Style	`<Button as="a">`	`<Button asChild><a /></Button>`
Element Type	Sonraithe sa prop	Sonraithe ón pháiste
Component Composition	Teoranta	Tacaíocht iomlán
Prop Merging	Scaipeadh bunúsach	Cumasc cliste
Ref Forwarding	Ní mór cumraíocht láimhe	Tógtha isteach
Event Handlers	D’fhéadfadh coinbhleac a bheith ann	Cumasc i gceart
Library Size	Gan spleáchas	Riachtanach: `@radix-ui/react-slot`

Cathain le Gach Cur Chuige a Úsáid

Úsáid an prop as nuair:

Más mian leat comhéadan API níos simplí
Má tá tú den chuid is mó ag athrú idir eilimintí HTML
Más mian leat spleáchais bhreise a sheachaint
Má tá an chomhpháirt simplí agus nach bhfuil gá le cumasc propanna casta

Úsáid asChild + Slot nuair:

Má tá tú ag comhdhlúthú le comhpháirteanna eile
Más mian leat iompraíocht chumasc propanna uathoibríoch
Má tá tú ag tógáil leabharlainne comhpháirte cosúil le Radix UI nó shadcn/ui
Más gá duit seolta tagairtí (refs) iontaofa idir cineálacha éagsúla comhpháirte

Príomhbhuntáistí

1. Solúbthacht HTML seimantúil

Cinntíonn an prop as go bhféadfaidh tú an eilimint HTML is oiriúnaí seimantúla a úsáid i gcónaí:

// Navigation container
<Container as="nav" className="navigation">
  <NavItems />
</Container>

// Main content area
<Container as="main" className="content">
  <Article />
</Container>

// Sidebar
<Container as="aside" className="sidebar">
  <Widgets />
</Container>

2. In-athúsáidteacht chomhpháirte

Is féidir dá mbeadh feidhm éagsúil ag comhpháirt amháin gan éagsúla a chruthú:

// Text component used for different elements
<Text as="h1" size="2xl">Page Title</Text>
<Text as="p" size="md">Body paragraph</Text>
<Text as="span" size="sm">Inline text</Text>
<Text as="label" size="sm">Form label</Text>

3. Feabhsúcháin inrochtaineachta

Roghnaigh eilimintí a sholáthraíonn an inrochtaineacht is fearr do gach comhthéacs:

// Link that looks like a button
<Button as="a" href="/signup">
  Sign Up Now
</Button>

// Button that submits a form
<Button as="button" type="submit">
  Submit
</Button>

// Heading with button styles
<Button as="h2" role="presentation">
  Section Title
</Button>

4. Comhtháthú córais stíle

Coinnigh stíliú comhsheasmhach agus tú ag athrú eilimintí:

const Card = styled.div`
  padding: 1rem;
  border-radius: 8px;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
`;

// Same styles, different elements
<Card as="article">Article content</Card>
<Card as="section">Section content</Card>
<Card as="li">List item content</Card>

Cásanna Úsáide Coitianta

Comhpháirteanna Tíograifíochta

Cruthaigh comhpháirteanna téacs solúbtha:

function Text({
  as: Element = 'span',
  variant = 'body',
  ...props
}) {
  const className = cn(
    'text-base',
    variant === 'heading' && 'text-2xl font-bold',
    variant === 'body' && 'text-base',
    variant === 'caption' && 'text-sm text-gray-600',
    props.className
  );

  return <Element className={className} {...props} />;
}

// Usage
<Text as="h1" variant="heading">Title</Text>
<Text as="p" variant="body">Paragraph</Text>
<Text as="figcaption" variant="caption">Caption</Text>

Comhpháirteanna Leagan Amach

Tóg leagain amach seimantúla:

function Flex({ as: Element = 'div', ...props }) {
  return (
    <Element
      className={cn('flex', props.className)}
      {...props}
    />
  );
}

// Semantic HTML
<Flex as="header" className="justify-between">
  <Logo />
  <Navigation />
</Flex>

<Flex as="main" className="flex-col">
  <Content />
</Flex>

Eilimintí Idirghníomhacha

Bain láimh le cineálacha idirghníomhaíochta éagsúla:

function Clickable({ as: Element = 'button', ...props }) {
  const isButton = Element === 'button';
  const isAnchor = Element === 'a';

  return (
    <Element
      role={!isButton && !isAnchor ? 'button' : undefined}
      tabIndex={!isButton && !isAnchor ? 0 : undefined}
      {...props}
    />
  );
}

// Various clickable elements
<Clickable as="button" onClick={handleClick}>Button</Clickable>
<Clickable as="a" href="/link">Link</Clickable>
<Clickable as="div" onClick={handleClick}>Div Button</Clickable>

Cleachtais is Fearr do TypeScript

Cineálacha Comhpháirte Ginearálta

Cruthaigh comhpháirte ilchineálacha a bhfuil sábháilteacht chineálach iomlán acu:

type PolymorphicRef<E extends React.ElementType> =
  React.ComponentPropsWithRef<E>['ref'];

type PolymorphicProps<
  E extends React.ElementType,
  Props = {}
> = Props &
  Omit<React.ComponentPropsWithoutRef<E>, keyof Props> & {
    as?: E;
  };

// Component with full type safety
function Component<E extends React.ElementType = 'div'>({
  as,
  ...props
}: PolymorphicProps<E, { customProp?: string }>) {
  const Element = as || 'div';
  return <Element {...props} />;
}

Props a Thagairt go Huathoibríoch

Roghnaíonn tú props go huathoibríoch bunaithe ar an eilimint:

// Props are inferred from the element type
<Component as="a" href="/home">Home</Component>  // ✅ href is valid
<Component as="div" href="/home">Home</Component> // ❌ TS error: href not valid on div

<Component as="button" type="submit">Submit</Component> // ✅ type is valid
<Component as="span" type="submit">Submit</Component>   // ❌ TS error

Aontais Dheighilte

Bain úsáid as aontais dheighilte chun props ar leith d’eilimintí a shainiú:

type ButtonProps =
  | { as: 'button'; type?: 'submit' | 'button' | 'reset' }
  | { as: 'a'; href: string; target?: string }
  | { as: 'div'; role: 'button'; tabIndex: number };

function Button(props: ButtonProps & { children: React.ReactNode }) {
  const Element = props.as;
  return <Element {...props} />;
}

Cleachtais is Fearr

1. Réamhshocraigh ar eilimintí seimantúla

Roghnaigh réamhshocruithe atá ionadaíoch don úsáid is coitianta:

// ✅ Good defaults
function Article({ as: Element = 'article', ...props }) { }
function Navigation({ as: Element = 'nav', ...props }) { }
function Heading({ as: Element = 'h2', ...props }) { }

// ❌ Too generic
function Component({ as: Element = 'div', ...props }) { }

2. Doiciméad na heilimintí tacaíochta

Sainmhínigh go soiléir cé na heilimintí atá tacaithe:

interface BoxProps {
  /**
   * The HTML element to render as
   * @default 'div'
   * @example 'section', 'article', 'aside', 'main'
   */
  as?: 'div' | 'section' | 'article' | 'aside' | 'main' | 'header' | 'footer';
}

3. Déan fíorú ar oiriúnacht na heilimintí

Tabhair rabhaidh nuair a úsáidtear eilimintí nach bhfuil oiriúnach:

function Button({ as: Element = 'button', ...props }) {
  if (__DEV__ && Element === 'div' && !props.role) {
    console.warn(
      'Button: When using as="div", provide role="button" for accessibility'
    );
  }

  return <Element {...props} />;
}

4. Bainistigh láimhseálaithe imeachtaí i gceart

Déan cinnte go n-oibríonn láimhseálaithe imeachtaí thar eilimintí éagsúla:

function Interactive({ as: Element = 'button', onClick, ...props }) {
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (Element !== 'button' && (e.key === 'Enter' || e.key === ' ')) {
      onClick?.(e as any);
    }
  };

  return (
    <Element
      onClick={onClick}
      onKeyDown={Element !== 'button' ? handleKeyDown : undefined}
      {...props}
    />
  );
}

Péacanna Coitianta

Naisc HTML Neamhbhailí

Bí cúramach le rialacha náisiúnta HTML maidir le srothanna:

// ❌ Invalid - button inside button
<Button as="button">
  <Button as="button">Nested</Button>
</Button>

// ❌ Invalid - div inside p
<Text as="p">
  <Box as="div">Invalid nesting</Box>
</Text>

// ✅ Valid nesting
<Text as="div">
  <Box as="div">Valid nesting</Box>
</Text>

Airíonna inrochtaineachta ganntanas

Cuimhnigh airíonna ARIA cuí a chur leis:

// ❌ Missing accessibility
<Box as="nav">
  <MenuItems />
</Box>

// ✅ Proper accessibility
<Box as="nav" aria-label="Main navigation">
  <MenuItems />
</Box>

Caillteanas sábháilteachta cineálach

Seachain cineálacha ró-urraithe:

// ❌ Too permissive - no type safety
function Component({ as: Element = 'div', ...props }: any) {
  return <Element {...props} />;
}

// ✅ Type safe
function Component<E extends React.ElementType = 'div'>({
  as,
  ...props
}: PolymorphicProps<E>) {
  const Element = as || 'div';
  return <Element {...props} />;
}

Saincheisteanna Feidhmíochta

Bí ar an eolas faoi thionchair ath-rindreála:

// ❌ Creates new component on every render
function Parent() {
  const CustomDiv = (props) => <div {...props} />;
  return <Component as={CustomDiv} />;
}

// ✅ Stable component reference
const CustomDiv = (props) => <div {...props} />;
function Parent() {
  return <Component as={CustomDiv} />;
}

Ilchineálacht

On this page