以下是一个示例,展示了如何将useRef对象从React服务传递给组件:
在React服务中创建useRef对象:
import React, { useRef } from "react";
function App() {
const inputRef = useRef(null);
return (
);
}
function ChildComponent({ inputRef }) {
const handleClick = () => {
inputRef.current.value = "New Value";
};
return (
);
}
export default App;
在上述示例中,我们在父组件App中创建了一个useRef对象inputRef,并将其传递给了子组件ChildComponent作为props。
在ChildComponent组件中,我们可以通过props解构赋值的方式获取inputRef,并在点击按钮时将输入字段的值修改为"New Value"。
通过这种方式,我们可以轻松地在子组件中访问和修改父组件中的DOM元素。