在組件內更方便的使用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)

複製代碼