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;
