关于react16.4

Posted 2021-01-09 zyl-tara

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 转发， 上述模式仍然可以用作后备。