您现在的位置是:首页 > Javascript
当前栏目
React 无障碍
2023-02-25 18:16:33 时间
这是我参与11月更文挑战的第20天,活动详情查看:2021最后一次更文挑战」
无障碍
JSX 支持所有 aria-*
HTML 属性。虽然大多数 React 的 DOM 变量和属性命名都使用驼峰命名(camelCased),但 aria-* 应该像其在 HTML 中一样使用带连字符的命名法(也叫诸如 hyphen-cased,kebab-case,lisp-case)。
语义化的 HTML
语义化的 HTML 是无障碍辅助功能网络应用的基础。 利用多种 HTML 元素来强化您网站中的信息通常可以使您直接获得无障碍辅助功能。
有时,语义化的 HTML 会被破坏。比如当在 JSX 中使用 <div>
元素来实现 React 代码功能的时候,又或是在使用列表(<ol>
, <ul>
和 <dl>
)和 HTML <table>
时。 在这种情况下,我们应该使用 React Fragments 来组合各个组件
Fragments
Fragments React组件返回多个元素,Fragments允许将子列表分组,而无需向DOM添加额外节点。(有可能没理解,不要紧,上代码)
父组件
class Table extends React.Component{
render(){
return(
<table>
<tr>
<Columns/>
</tr>
</table>
)
}
}
子组件Columns return中需要有最外层标签,所以需要添加<div>
class Columns extends React.Component{
render(){
return(
<div>
<td>1</td>
<td>2</td>
</div>
)
}
}
可以发现<div>
也会被添加进去,但是这不是我们想要的。
将子组件的<div>
换成<Fragment>
import React, { Fragment } from 'react';
class Columns extends React.Component{
render(){
return(
<Fragment>
<li>1</li>
<li>2</li>
</Fragment>
)
}
}
短语法
用看似空标签<> </>
代替<Fragment></Fragment>
,但是其不支持key属性
import React from 'react';
class Columns extends React.Component{
render(){
return(
<>
<li>1</li>
<li>2</li>
</>
)
}
}
Fragments key属性
当<Fragment>
被写入到遍历中时,同样控制台会提示我们需要唯一的key。因此我们也需要为其添加key属性。
class Columns extends React.Component {
constructor(props) {
super(props)
this.state = {"data":[
{'id':1}
,{'id':2}
]}
}
render() {
return(
<div>
{
this.state.data.map((item)=>(
<Fragment >
<li>{item.id}</li>
</Fragment>
))
}
</div>
)
}
}
key
是唯一可以传递给 Fragment
的属性, <Fragment key={item.id}>
相关文章
- JDK中内嵌JS引擎介绍及使用
- 49195,npm最后的疯狂?盘点10款最有前途JavaScript构建工具
- 译文:5个增强Node.js应用程序增强功能
- 4个例子,吃透 JavaScript 实现的二叉搜索树 BST
- Vue中使用XML和JSON格式互转插件
- JDK中Jshell简单使用(JDK9版本以上或者JDK9版本)
- shiro中的JSP标签支持
- Java技术点-json转对象,对象转json
- SpringBoot+SpringDataJpa @Query之 JPQL使用书写模板(模糊查询and条件查询)
- Spring Boot中的Freemarker模版引擎引用css和js的正确姿势
- Node.js解压版的环境配置及相关常用命令
- JSP学习笔记(6)—— 自定义MVC框架
- JSP学习笔记(5)——Servlet、监听器、过滤器、MVC模式介绍
- Jsp学习笔记(4)——分页查询
- APIJSON简单使用
- JSP学习笔记(3)——JSTL 标签库
- JSP学习笔记(1)——Jsp指令、动作元素和内置对象
- JavaScript ES6 Promise对象
- Web前端——JavaScript扩展补充
- Web前端——表单提交和Js添加选项