Skip to content

wowlusitong/forward-ref

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

forward-ref · npm min

在 Class Component 中更方便的使用ref

介绍

forwardRef

将ref以props的形式传递到组件内,也就是说组件可以接收到一个叫做forwardRef的props

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)

About

A Higher Order Component for React.forwardRef

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published