关于react16.4——转发refs和片段Fragment

1.转发refs

Ref 转发是一种自动将 ref 通过组件传递给子组件的技术。

一些组件倾向于以与常规 DOM button 和 input 类似的方式在整个应用程序中使用， 并且访问他们的 DOM 节点可能不可避免地用于管理 焦点（focus），选择（selection）或动画（animations）。

这就需要使用React.forwardRef来获取传递给它的ref，然后转发给它渲染的DOM。

例如，

//ref.current 将指向 <button> DOM节点
const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton">
   {props.children}
  </button>
));

// 现在可以直接获取button的ref
const ref = React.createRef();
<FancyButton ref={ref}>Click me!</FancyButton>;

 回调函数方式的ref： 参考 https://blog.csdn.net/liangklfang/article/details/72858295

2.片段Fragments

React 中一个常见模式是为一个组件返回多个元素。 片段(fragments) 可以让你将子元素列表添加到一个分组中，并且不会在DOM 中增加额外节点。

例如，

import React, { Component, Fragment } from 'react';
export default class App extends Component {
  
  render() {
    return (
      <Fragment>
        {this.props.children}
      </Fragment>
    );
  }
}

 

 

转载于:https://www.cnblogs.com/zyl-Tara/p/9719351.html