forwardRef 使用例子

### React 中 forwardRef 的使用示例 以下是一个完整的 `forwardRef` 使用示例，展示如何通过父组件访问子组件的 DOM 元素或方法[^2]。 ```jsx import React, { forwardRef, useRef } from 'react'; // 子组件定义 const ChildComponent = forwardRef((props, ref) => { return <input ref={ref} type="text" placeholder="请输入内容" />; }); // 父组件定义 function ParentComponent() { const inputRef = useRef(); const handleClick = () => { // 调用子组件的 focus 方法 inputRef.current.focus(); }; return ( <> <ChildComponent ref={inputRef} /> <button onClick={handleClick}>聚焦输入框</button> </> ); } export default ParentComponent; ``` 在这个例子中，`forwardRef` 将 `ref` 从父组件传递到子组件中的 `<input>` 元素上。通过调用 `inputRef.current.focus()`，可以实现对子组件中输入框的聚焦操作。 --- ### 结合 useImperativeHandle 的高级用法 如果需要更精确地控制父组件通过 `ref` 可以访问的内容，可以结合 `useImperativeHandle` 使用。以下是示例代码： ```jsx import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react'; const FancyInput = forwardRef((props, ref) => { const [value, setValue] = useState(''); const inputRef = useRef(); // 定义父组件可以通过 ref 访问的方法 useImperativeHandle(ref, () => ({ focus: () => { inputRef.current.focus(); }, getValue: () => value, setValue: (newValue) => setValue(newValue), })); return ( <div> <input ref={inputRef} value={value} onChange={(e) => setValue(e.target.value)} /> </div> ); }); function ParentComponent() { const inputRef = useRef(); const handleFocus = () => { inputRef.current.focus(); }; const handleGetAndSet = () => { console.log('当前值:', inputRef.current.getValue()); inputRef.current.setValue('新值'); }; return ( <> <FancyInput ref={inputRef} /> <button onClick={handleFocus}>聚焦输入框</button> <button onClick={handleGetAndSet}>获取并设置值</button> </> ); } export default ParentComponent; ``` 在这个例子中，`useImperativeHandle` 定义了父组件可以通过 `ref` 访问的具体方法，包括 `focus`、`getValue` 和 `setValue`[^3]。 --- ### 注意事项 1. **性能问题**：`useImperativeHandle` 和 `forwardRef` 不会显著影响性能，但在不需要直接操作子组件时，应尽量避免使用它们。 2. **封装性**：过度依赖 `ref` 可能破坏组件的封装性，因此建议仅在必要时使用。 3. **兼容性**：`forwardRef` 和 `useImperativeHandle` 适用于函数式组件，对于类组件需要通过 `React.createRef` 或其他方式实现类似功能。 ---