React--Refs转发

如果将上面的

function InnerButton (props) {
  console.log('props: ', props)
  return (
    <button
      ref={props.ref}
    >
      {props.children}
    </button>
  )
}

export default class Home extends React.Component {
  state = {
    buttonRef: React.createRef(),
  }

  componentDidMount () {
    console.log(this.state.buttonRef) // { current: undefined}
    // ref 指向了 undefined
  }

  render () {
    return (
      <div>
        <h1>Home</h1>
        <InnerButton ref={this.state.buttonRef} />
      </div>
    )
  }
}

在InnerButton内部打印了props输出结果如下

可见，ref虽然在props中被传递过来了，但是它的值却为undefined，而且在componentDidMount钩子函数中打印的buttonRef.current同样指向undefined，警告提示：ref is not a prop.

其原因是，React将ref属性做了特殊处理，当ref需要引用组件时，必须使用React.forwardRef()方法二次包装

代码修改如下：

const InnerButton = React.forwardRef(function (props, ref) {
  return (
    <button
      ref={ref}
    >
      {props.children}
    </button>
  )
})

export default class Home extends React.Component {
  state = {
    buttonRef: React.createRef(),
  }

  componentDidMount () {
    console.log(this.state.buttonRef) // { current: button }
    // ref 指向了 button 元素
  }

  render () {
    return (
      <div>
        <h1>Home</h1>
        <InnerButton ref={this.state.buttonRef} />
      </div>
    )
  }
}

当需要使用ref转发的组件被高阶组件又包装了一层时，又该如何转发呢？

先编写如下测试代码：

function logMounted (Component) {
  class LogMounted extends React.Component {
    componentDidMount () {
      console.log(`>---- ${Component.name ? Component.name : 'Component' } has mounted ----<`)
    }

    render () {
      return <Component {...this.props} />
    }
  }

  return LogMounted
}

const InnerButton = React.forwardRef(function (props, ref) {
  return (
    <button
      ref={ref}
    >
      {props.children}
    </button>
  )
})
InnerButton.name = 'InnerButton'

const LogMountedInnerButton = logMounted(InnerButton)

export default class Home extends React.Component {
  state = {
    buttonRef: React.createRef(),
  }

  componentDidMount () {
    console.log(this.state.buttonRef) // { current: LogMounted }
    // ref.current 指向了 LogMounted 组件
  }

  render () {
    return (
      <div>
        <h1>Home</h1>
        <LogMountedInnerButton ref={this.state.buttonRef} />
      </div>
    )
  }
}

函数式组件logMounted的作用是在组件挂载完之后，打印出'xxx has mounted'信息。通过该函数const LogMountedInnerButton = logMounted(InnerButton)包装之前的InnerButton返回一个新的组件，在HomeJSX中同样赋予了ref属性

而在控制台查看打印信息，this.state.buttonRef 指向的却是组件LogMounted，原因同先前一样：ref依然被当做了普通props传递了

所以，要达到ref既能作为特殊属性在高阶组件上使用，又能够有效地传递到被包装的组件内部，在函数式组件logMounted返回的内容做处理：

function logMounted (Component) {
  class LogMounted extends React.Component {
    componentDidMount () {
      console.log(`>---- ${Component.name ? Component.name : 'Component' } has mounted ----<`)
    }

    render () {
      const { forwardedRef, ...rest } = this.props
      return <Component {...rest} ref={forwardedRef} />
    }
  }

  return React.forwardRef((props, ref) => <LogMounted {...props} forwardedRef={ref} />)
}