React.js中的可访问性
html元素上的aria-*属性在React.js中也受支持。其他属性通常用驼峰写，但这些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提供的片段，如下所示：
import React, { Fragment } from ‘react’;
function MessageList({ message }) {
return (
<Fragment>
<dt>{ message.key }</dt>
<dd>{message.description}</dd>
</Fragment>
);
}我们还可以将其用于将一系列项目映射到片段数组-
function MessageList(props) {
return (
<dl>
{props.messages.map( message => (
//映射集合时，片段也应该有一个“关键”道具
<Fragment key = { message.id}>
<dt>{message.from}</dt>
<dd>{message.To}</dd>
</Fragment>
))}
</dl>
);
}片段的简短语法只写>>
import React, { Fragment } from ‘react’;
function MessageList({ message }) {
return (
<>
<dt>{ message.key }</dt>
<dd>{message.description}</dd>
</>
);
}表格中的标签
而不是在标签中写属性，我们将其写为htmlFor
<label htmlFor = "userID">Name:</label> <input id = "userID" type = "text" name = "name"/>
使用ref进行聚焦控制-
我们可以创建ref为-
This.userInput = React.createRef();
getFocus() {
//使用原始DOMAPI明确显示文本输入
// Note: we're accessing "current" to get the DOM node
this.userInput.current.focus();
}要通过高阶组件处理ref，需要使用前向ref。