React 中可直接使用等 HTML5 语义标签，因其编译为 React.createElement()且浏览器原生支持；需注意大小写区分（是标签，是组件）、自闭合标签斜杠、IE 兼容性及用 Fragment 替代无意义 div 包装。
React 中直接写
等 HTML5 标签完全合法
JSX 本质是语法糖，最终编译为 React.createElement() 调用，只要 浏览器 支持的原生 HTML 标签，React 都允许直接使用。不需要额外引入、不需要加 react- 前缀，也不需要包裹在
里“降级兼容”。
常见误区是以为必须用
代替JSX 里
IE11 及更老浏览器需要
用
——这反而丢失了语义和 SEO 价值。
-
、
- 注意：所有自闭合标签（如
- 属性名沿用 HTML 规范，比如
aria-label、role、tabIndex（不是tabindex）
JSX 里
不能当组件名用，但可以当 HTML 标签用
React 区分大小写：
（首字母大写）会被当作自定义组件，而
（全小写）始终被识别为原生 HTML 元素。
如果写了
但没定义这个组件，控制台会报 Element type is invalid 错误；如果本意就是 HTML 语义标签，却写成大写，就会意外触发组件查找逻辑。
立即学习 “ 前端免费学习笔记（深入）”；
- 想用语义化结构标签 → 写
- 想封装可复用的页头组件 → 定义
function Header() { ……}，再用
- 混用场景：比如
IE11 及更老浏览器需要 document.createElement 补丁
HTML5 结构标签在 IE8–IE10 中不被识别为块级元素，会导致样式失效（比如
默认显示为行内元素）。React 本身不处理这个兼容问题，需手动修复。
现代项目基本已放弃 IE 支持，但如果必须兼容，有两种方式：
- 全局执行
document.createElement('header')等语句（通常放在index.html的里） - 引入
html5shiv脚本（仅对传统 HTML 有效，对 React 动态渲染的节点作用有限） - 更稳妥的做法：在 CSS 中显式声明
header, nav, main, section, article, aside, footer {display: block;}
用 React.Fragment 替代无意义的
包装
很多人为了满足 JSX 单根节点要求，习惯性用
包裹
和body > div）和屏幕阅读器导航。
正确做法是用React.Fragment（或简写>）作为容器：
function Layout() { return ( <> 网站标题 主要内容 ); }
Fragment 不会出现在最终 DOM 中，既满足 JSX 语法约束，又保持 HTML5 结构纯净。注意：带 key 属性时必须用完整写法
真正容易被忽略的是：当组件返回多个并列的 HTML5 标签时，开发者第一反应仍是套一层
，而不是想到 Fragment——这会让语义结构悄悄退化成一堆
。
转载说明：转载本网站任何内容，请按照转载方式正确书写本站原文地址。本站提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。
包装
很多人为了满足 JSX 单根节点要求，习惯性用
包裹
和body > div）和屏幕阅读器导航。
正确做法是用React.Fragment（或简写>）作为容器：
function Layout() { return ( <> 网站标题 主要内容 ); }Fragment 不会出现在最终 DOM 中，既满足 JSX 语法约束，又保持 HTML5 结构纯净。注意：带 key 属性时必须用完整写法
真正容易被忽略的是：当组件返回多个并列的 HTML5 标签时，开发者第一反应仍是套一层
，而不是想到 Fragment——这会让语义结构悄悄退化成一堆
。
转载说明：转载本网站任何内容，请按照转载方式正确书写本站原文地址。本站提供的一切软件、教程和内容信息仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。
文章搜索
星耀云
星耀云(sgvps.cn)专注于以代理价格提供云服务器、虚拟主机、云电脑、CDN等，本站提供关注与分享互联网及软件IT技术的博客，有助于大家解决服务器与编程上的问题，所蕴含的包括资源分享，免费源码，提供大量免费、高清的php教程。
阅读量
30997
评论数
0
标签云