React 无障碍

用户4793865

发布于 2023-01-12 15:40:32

2350

发布于 2023-01-12 15:40:32

这是我参与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>
    )
  }
}