再利用可能な
これは、HTML をよりセマンティックで SEO に適したものにしたい場合の典型的なシナリオです。
解決策は、コンポーネントのレンダリングにどの HTML タグを使用するかを消費者が決定できるようにすることです。
これは何も新しいことではありません。
これは、コンポーネントのレンダリングにどの 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>; }
React は Typescript の型をサポートします。
React が提供する typescript の React.ElementType タイプを使用すると、次のような IDE のオートコンプリートを取得できます
React.ElementType の代わりに使用できます
type SectionProps = { as?: keyof JSX.IntrinsicElements, children: React.ReactNode, }
または
type SectionProps = { as?: keyof HTMLElementTagNameMap, children: React.ReactNode, }
以上が\'as\' プロパティを使用した React コンポーネントの動的 HTML タグの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。