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中文网其他相关文章！