react如何引用传递
React 引用传递的方法
使用 React.forwardRef
React.forwardRef 允许组件接收 ref 并向下传递到子组件。
const Child = React.forwardRef((props, ref) => (
<button ref={ref}>{props.children}</button>
));
function Parent() {
const buttonRef = React.useRef();
return <Child ref={buttonRef}>Click</Child>;
}通过 Props 传递引用
将 ref 作为普通 prop 传递，适用于非 DOM 组件。
function Child({ innerRef }) {
return <div ref={innerRef}>Content</div>;
}
function Parent() {
const divRef = React.useRef();
return <Child innerRef={divRef} />;
}使用 useImperativeHandle
配合 forwardRef 暴露子组件的特定方法或值。
const Child = React.forwardRef((props, ref) => {
const inputRef = React.useRef();
React.useImperativeHandle(ref, () => ({
focus: () => inputRef.current.focus()
}));
return <input ref={inputRef} />;
});
function Parent() {
const childRef = React.useRef();
return (
<>
<Child ref={childRef} />
<button onClick={() => childRef.current.focus()}>Focus</button>
</>
);
}Context 传递引用
通过 Context 跨层级传递 ref，适合深层嵌套组件。
const RefContext = React.createContext();
function Parent() {
const ref = React.useRef();
return (
<RefContext.Provider value={ref}>
<Child />
</RefContext.Provider>
);
}
function Child() {
const ref = React.useContext(RefContext);
return <div ref={ref}>Content</div>;
}回调 Refs
通过回调函数的形式获取子组件的引用。
function Child({ inputRef }) {
return <input ref={inputRef} />;
}
function Parent() {
let inputElement;
return (
<Child inputRef={el => (inputElement = el)} />
);
}注意事项
- 避免滥用
ref，优先使用 React 的数据流（如props和状态管理）。 forwardRef仅能用于函数组件或memo组件。- 直接操作 DOM 可能破坏 React 的虚拟 DOM 一致性，需谨慎使用。
