React 元件中帶有「as」屬性的動態 HTML 標籤

想像一下您正在建立一個可重複使用的

帶有 React 的元件。該部分元件呈現一個 HTML

。標記，因為您對其進行了硬編碼。 但是，在某些情況下，您可能需要使用其他標籤，例如

HTML 標籤。

這是一個典型的場景，當您希望 HTML 更加語義化並且 SEO 友好時。

解決方案是讓消費者決定應該使用哪個 HTML 標籤來呈現元件。

“as” 道具

這不是什麼新鮮事。

這是一種行業標準“方法”，可讓您動態決定應該使用哪個 HTML 標籤來呈現元件。很多 React Components 函式庫都使用它，像是 Chakra UI 和 Material UI。

如果沒有「as」屬性，您需要為每個用例建立單獨的元件，這是沒有意義的。別這樣做！

這就是你使用「as」屬性的方式

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

這是組件定義

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

export const Section = (props: SectionProps) => {

  const { as: Tag = 'div', children } = props;

  return <Tag>{children}</Tag>;

}

Typescript 對「as」屬性的支持

React 幫助我們處理 Typescript 類型。

使用 React 提供的打字稿的 React.ElementType 類型，您將為您的 IDE 獲得自動完成功能，如下所示

作為 React.ElementType 的替代品，您可以使用

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

或

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

以上是React 元件中帶有「as」屬性的動態 HTML 標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！