标签：注意 fun 列表 tor import 文本 inpu class function
1.React片段Fragment
语义化的 HTML 是Web应用程序可访问性的基础。有时候我们会向 JSX 中添加 <div> 元素，会破坏 React 代码正常工作，特别是在使用列表（<ol>，<ul>和<dl>）以及 HTML <table>。在这些情况下，我们应该使用 React 片段(Fragments) 将多个元素组合在一起。
import React, { Component, Fragment } from ‘react‘;
export default class App extends Component {
render() {
return (
<Fragment>
{this.props.children}
</Fragment>
);
}
}
2.可访问表单
每个HTML表单控件，例如<input> 和 <textarea>，都需要被标记上的可访问的标签。尽管这些标准的HTML实践可以直接用于 React，但需要注意在 JSX 中，for 特性被写作htmlFor。
<label htmlFor="namedInput">Name:</label> <input id="namedInput" type="text" name="name"/>
3.编程式地管理焦点
我们的React应用会在运行期间持续地修改HTML DOM元素，有时会导致键盘焦点丢失或定位到未知元素上。为使用它，我们先在组件类的JSX中创建一个元素的ref。
render() { return ( <input type="text" ref={(input) => { this.textInput = input; }} /> ); }
而后，当需要时，我们可以在我们组件的其他地方设置焦点
focus() { //使用原始DOM API显式地集中文本输入 //注意：我们正在访问 "current" 来获取DOM节点 this.textInput.current.focus(); }
有时，父组件需要将焦点设置为子组件中的一个元素。 我们可以通过 将 DOM refs 公开给父组件 来做到这一点 通过一个子组件上指定的 prop 将父对象的引用（ref）转发给子节点的DOM节点。
function CustomTextInput(props) { return ( <div> <input ref={props.inputRef} /> </div> ); } class Parent extends React.Component { constructor(props) { super(props); this.inputElement = React.createRef(); } render() { return ( <CustomTextInput inputRef={this.inputElement} /> ); } } /> // 现在您可以根据需要设置焦点。 this.inputElement.current.focus();
当使用 HOC（高阶组件） 扩展组件时，建议使用 React 的 forwardRef 函数将ref 转发到包装组件。 如果第三方 HOC 没有实现 ref 转发， 上述模式仍然可以用作后备。
标签：注意 fun 列表 tor import 文本 inpu class function
原文地址：https://www.cnblogs.com/zyl-Tara/p/9718591.html
