基本用法
-
forwardRef：允许你的组件使用 ref 将一个 DOM 节点暴露给父组件。
import { forwardRef } from 'react';
const MyInput = forwardRef((props, ref) => {
// ...
});
- 案例分析：ref 属性是 React 的特殊属性，不能直接使用。
import {useRef} from 'react'
function InputCom({ref}) {
return (
<input type='text' ref={ref} />
)
}
function App() {
const inpRef = useRef(null)
const focus = () => {
inpRef.current?.focus()
}
return (
<>
<InputCom ref={inpRef} />
</>
)
}
- 上面就会弹出报错信息：
Warning: InputCom: `ref` is not a prop. Trying to access it will result in `undefined` being returned.
If you need to access the same value Within the child component, you should pass it as a company's prop.
// 警告:InputCom: 'ref不是一个prop。试图访问它将导致返回undefine。如果你需要在子组件中访问相同的值，你应该把它作为公司的prop传递。
- 如果想传递 ref，这时候就要借助 forwardRef 函数
import { forwardRef, useRef } from "react";
const InputCom = forwardRef((props, ref) => {
return <input type="text" ref={ref} />;
});
export default function ProRef() {
const inpRef = useRef(null);
const focus = () => {
inpRef.current?.focus();
};
return (
<>
<InputCom ref={inpRef} />
<button onClick={focus}>focus</button>
</>
);
}
文章来源地址https://www.toymoban.com/news/detail-505785.html
文章来源：https://www.toymoban.com/news/detail-505785.html
到了这里，关于【React】forwardRef 用法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[React] useRef用法和特性](https://imgs.yssmx.com/Uploads/2024/02/428292-1.png)
