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

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)

复制代码