ホームページ > ウェブフロントエンド > jsチュートリアル > \'as\' プロパティを使用した React コンポーネントの動的 HTML タグ

\'as\' プロパティを使用した React コンポーネントの動的 HTML タグ

Mary-Kate Olsen
リリース: 2024-11-25 03:08:26
オリジナル
1020 人が閲覧しました

再利用可能な

を構築していると想像してください。 React を使用したコンポーネント。 Section コンポーネントは HTML

をレンダリングします。タグをハードコードしたためです。 ただし、場合によっては、代わりに他のタグ、たとえば
を使用したい場合があります。 HTML タグ。

これは、HTML をよりセマンティックで SEO に適したものにしたい場合の典型的なシナリオです。

解決策は、コンポーネントのレンダリングにどの HTML タグを使用するかを消費者が決定できるようにすることです。

「as」プロップ

これは何も新しいことではありません。

これは、コンポーネントのレンダリングにどの HTML タグを使用するかを動的に決定できるようにする業界標準の「アプローチ」です。 Chakra UI やマテリアル UI など、多くの React コンポーネント ライブラリで使用されています。

「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 が提供する typescript の React.ElementType タイプを使用すると、次のような IDE のオートコンプリートを取得できます

Dynamic HTML Tag in React Components with the

React.ElementType の代わりに使用できます

type SectionProps = {
  as?: keyof JSX.IntrinsicElements,
  children: React.ReactNode,
}
ログイン後にコピー

または

type SectionProps = {
  as?: keyof HTMLElementTagNameMap,
  children: React.ReactNode,
}
ログイン後にコピー

以上が\'as\' プロパティを使用した React コンポーネントの動的 HTML タグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート