她，可以讓你更方便的使用React.forwardRef

Aasd發表於2019-03-22
ReactForward

React.forwardRef是React@16.3釋出的一個利器，具體功能就不在這裡闡述了，相關文章很多。因為在使用forwardRef的時候多少還是有一些繁瑣，所以特意封裝了一個能更方便使用的版本。

原始碼地址: github.com/wowlusitong…

特點

  • 使用簡單
  • 0依賴
  • 支援decorator

API介紹

forwardRef

將ref以props的形式傳遞到元件內，也就是說元件可以接收到一個叫做forwardRef的props

setRef

如果要把ref給當前元件，那麼則需要setRef函式，它會直接設定元件的ref為forwardRef

使用方法

安裝依賴

$ npm install forward-ref
# or
$ yarn add forward-ref
複製程式碼

在Decorator中使用

檢視程式碼示例

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

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

複製程式碼

設定DOM Ref

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

@forwardRef
@XXX // 元件使用的decorator，比如react-redux的connect等
@setRef
export default class DecoratorDemo extends React.Component {
  return (
    <div ref={this.props.forwardRef}>
      XXXX
    </div>
  )
}

複製程式碼

在組合HOC中使用

檢視程式碼示例

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

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

export default _.compose(
  forwardRef,
  XXX, // 元件使用的HOC，比如react-redux的connect等
  setRef
)(HOCDemo)
// 或者
export default forwardRef(
  XXX( // 元件使用的HOC，比如react-redux的connect等
    setRef(HOCDemo)
  )
);

複製程式碼

相關文章