这是我参与11月更文挑战的第20天,活动详情查看:2021最后一次更文挑战」
JSX 支持所有 aria-*
HTML 属性。虽然大多数 React 的 DOM 变量和属性命名都使用驼峰命名(camelCased),但 aria-* 应该像其在 HTML 中一样使用带连字符的命名法(也叫诸如 hyphen-cased,kebab-case,lisp-case)。
语义化的 HTML 是无障碍辅助功能网络应用的基础。 利用多种 HTML 元素来强化您网站中的信息通常可以使您直接获得无障碍辅助功能。
有时,语义化的 HTML 会被破坏。比如当在 JSX 中使用 <div>
元素来实现 React 代码功能的时候,又或是在使用列表(<ol>
, <ul>
和 <dl>
)和 HTML <table>
时。 在这种情况下,我们应该使用 React 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>
</>
)
}
}
当<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}>