forwardRef ref引用

React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。

不用 forwardRef 实现一个 demo（input框聚焦）

import { createRef, useEffect, useState } from 'react'

function InputWrap(props) {

  const refInput = createRef(null)

  useEffect(() => {
    props.getElem(refInput)
  // 下面这个注释是当useEffect中使用了外部依赖，而依赖数组中没有写，此时会有警告，使用下面这个注释，就可以去掉这个警告
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return <input type="text" ref={refInput}/>
}

function Furniturelist() {

  const [elem, setElem] = useState(null)

  const getElem = (el) => {
    setElem(el)
    el.current.focus()
  }

  return <div>
    <h4>家具列表</h4>
    <InputWrap elem={elem} getElem={getElem} />
  </div>
}

export default Furniturelist;

用 forwardRef 实现一个 demo（input框聚焦）

import { createRef, forwardRef, useEffect } from 'react'

// forwardRef 第一个参数是传统的props，第二个参数是ref属性
const InputWrap = forwardRef((props, ref) => {
  return <input ref={ref} type="text" defaultValue={props.defaultValue} />
})

function Furniturelist() {

  const inputRef = createRef(null)

  useEffect(() => {
    console.log(inputRef)
    inputRef.current.focus()
  }, [inputRef])

  return <div>
    <h4>家具列表</h4>
    <InputWrap ref={inputRef} defaultValue="1111" />
    <button onClick={() => console.log(inputRef.current.value)}>获取input值</button>
  </div>
}

export default Furniturelist;