Refs & 函数组件

我们不能直接在函数组件上使用 ref 属性，ref的current会是一个null。

xxxxxxxxxx
function FnCom (){
    return <h1>hello,baizhan</h1>
}

export default FnCom

xxxxxxxxxx
//App.js
 componentDidMount(){
    console.log(this.comRef)
  }

  render() {
    return (
      <>
      <FnCom ref={this.comRef}/>
      </>
    )
  }

转发 refs 到 DOM 组件

通过转发refs可以将ref转发到一个 DOM 元素或 class 组件。

xxxxxxxxxx
//FnCom.js
import React from "react"

export default React.forwardRef(
    (props,ref)=><h1 ref={ref}>hello,百战</h1>
)

实时效果反馈

1. 下列说法错误的是：

A 给函数组件设置ref，则ref存储函数组件对应的实例对象

B 函数组件的ref只能转发

答案

1=>A