React.js 中的可访问性

React.js 也支持 HTML 元素上的 aria-* 属性。其他属性通常使用驼峰命名法，但 aria-* 属性使用连字符命名法。

<input
   type = &"text&";
    aria-label = {labelText}
    aria-required = &"true&";
    onChange = {changeHandler}
    value = {inputValue}
    name = &"userInput&";
/>

如果我们在 React.js 中使用父 div，有时我们会破坏 html 的语义

示例

render(){
   return(
      <div>
         <h1>Test</h1>
      </div>
   );
}

如果使用表格、列表等，Div 可能会导致语义问题。为了避免这种情况，我们可以使用 React 提供的 fragment，如下所示 −

import React, { Fragment } from ‘react’;
function MessageList({ message }) {
   return (
      <Fragment>
         <dt>{ message.key }</dt>
         <dd>{message.description}</dd>
      </Fragment>
   );
}

我们还可以用它来将一个 item 集合映射到一个 fragment 数组 −

function MessageList(props) {
   return (
      <dl>
          {props.messages.map( message => (
            // 映射集合时，片段也应该有一个 `key` 属性
            <Fragment key = { message.id}>
               <dt>{message.from}</dt>
               <dd>{message.To}</dd>
            </Fragment>
         ))}
      </dl>
   );
}

Fragment 的简洁语法就是 >>

import React, { Fragment } from ‘react’;
function MessageList({ message }) {
   return (
      <>
         <dt>{ message.key }</dt>
         <dd>{message.description}</dd>
      </>
   );
}

表单中的标签

标签中的 for 属性我们不用写，而是写成 htmlFor

<label htmlFor = "userID">Name:</label>
<input id = "userID" type = "text" name = "name"/>

使用 ref 控制焦点 −

我们可以将 ref 创建为 −

This.userInput = React.createRef();
getFocus() {
   // 使用原始 DOM API 显式地聚焦文本输入框
   // 注意:我们访问的是"current"来获取 DOM 节点
   this.userInput.current.focus();
}

要通过高阶组件来处理引用，需要使用前向引用。

相关文章

• 在 React Native 应用中添加动画加载器和启动画面
• 在 React JS 中创建链接的二维码
• 使用 React-Three-Fiber 在 React 中创建天空着色器
• 在 React JS 中创建动画加载骨架
• 使用纯 CSS 和 HTML 在 React JS 中创建 PDF
• React JS 中的设备检测和响应式设计
• 使用 React-Three-Fiber 在 React 中创建 3D 金属纹理盒子
• React JS 中的文件拖放功能
• 使用 react-archer 在 React JS 中绘制 DOM 元素之间的箭头
• 使用 React JS 创建富文本编辑器

有用资源

• javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/