React 组件中带有“as”属性的动态 HTML 标签

这是一个典型的场景，当您希望 html 更加语义化并且 seo 友好时。

解决方案是让消费者决定应该使用哪个 html 标签来呈现组件。

“as” 道具

这不是什么新鲜事。

这是一种行业标准“方法”，允许您动态决定应该使用哪个 html 标签来呈现组件。很多 react components 库都使用它，比如 chakra ui 和 material ui。

如果没有“as”属性，您需要为每个用例创建单独的组件，这是没有意义的。别这样做！

这就是你使用“as”属性的方式

import { section } from './section';

const app = () => {
  return (
    <p>
      <section as="section">cta</section>
      <section as="article">my article</section>
      <section>this use the default html tag of the component</section>
    </p>
  );
};

登录后复制

这是组件定义

type sectionprops = {
  as?: react.elementtype,
  children: react.reactnode,
}

export const section = (props: sectionprops) => {

  const { as: tag = 'p', 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,
}

登录后复制