假设您正在使用 react 构建一个可重用的
标记，因为您对其进行了硬编码。 但是，在某些情况下，您可能想使用其他标签，例如
html 标签。
这是一个典型的场景，当您希望 html 更加语义化并且 seo 友好时。
解决方案是让消费者决定应该使用哪个 html 标签来呈现组件。
“as” 道具
这不是什么新鲜事。
这是一种行业标准“方法”，允许您动态决定应该使用哪个 html 标签来呈现组件。很多 react components 库都使用它，比如 chakra ui 和 material ui。
如果没有“as”属性，您需要为每个用例创建单独的组件，这是没有意义的。别这样做！
这就是你使用“as”属性的方式
import { section } from './section';const app = () => { return ( cta my article this use the default html tag of the component );};
这是组件定义
type sectionprops = { as?: react.elementtype, children: react.reactnode,}export const section = (props: sectionprops) => { const { as: tag = 'div', children } = props; return {children};}
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 标签的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1498814.html
微信扫一扫 
支付宝扫一扫 
