React.forwardRef是React@16.3发布的一个利器，具体功能就不在这里阐述了，相关文章很多。因为在使用forwardRef的时候多少还是有一些繁琐，所以特意封装了一个能更方便使用的版本。

源码地址: github.com/wowlusitong…

特点

使用简单
0依赖
支持decorator

API介绍

forwardRef

将ref以props的形式传递到组件内，也就是说组件可以接收到一个叫做forwardRef的props，通常用此方法获取组件内的dom

setRef

如果要把ref给当前组件，那么则需要setRef函数，它会直接设置组件的ref为forwardRef, 使用此方法直接返回当前组件

使用方法

安装依赖

$ npm install forward-ref
# or
$ yarn add forward-ref

在Decorator中使用

获取DecoratorDemo组件本身查看代码示例

import { forwardRef, setRef } from 'forward-ref';

@forwardRef
@XXX // 组件使用的decorator，比如react-redux的connect等
@setRef
export default class DecoratorDemo extends React.Component {
  // ...
}

设置DOM Ref

获取div DOM 查看代码示例

import { forwardRef, setRef } from 'forward-ref';

@forwardRef
export default class ForwardDemo extends React.Component {
  render() {
    return (
      <div ref={this.props.forwardRef}>
        XXX
      </div>
    )
  }
}

在组合HOC中使用

查看代码示例

import { forwardRef, setRef } from 'forward-ref';

class HOCDemo extends React.Component {
  // ...
}

export default forwardRef(
  XXX( // 组件使用的HOC，比如react-redux的connect等
    setRef(HOCDemo)
  )
);

// 或者使用loadsh的compose，这样会更方便
export default _.compose(
  forwardRef,
  XXX, // 组件使用的HOC，比如react-redux的connect等
  setRef
)(HOCDemo)

在组件内更方便的使用React.forwardRef

特点