如何使用forwardRef
从组件传递多个元素
我有这个组件,我想将loader--holder
和loader--holder__logo
分别传递给父函数组件
const Loader = forwardRef((props, ref) => {
const ref1 = useRef(null);
const ref2 = useRef(null);
return (
<div className="loader--holder" ref={ref1}>
<div className="loader--holder__box">
<div className="loader--holder__logo"ref={ref2}>
<img src={logo} alt="logo" />
</div>
</div>
</div>
);
});
父组件
export default function HomePage() {
const ref = React.createRef();
return (
<div>
<Loader ref={ref} />
</div>
)
}
const Loader = forwardRef((props, ref) => {
const ref1 = useRef(null);
const ref2 = useRef(null);
useEffect(() => {
if (ref) {
ref.current = {
ref1,
ref2,
};
}
}, [ref]);
return (
<div className="loader--holder" ref={ref1}>
<div className="loader--holder__box">
<div className="loader--holder__logo" ref={ref2}>
<div>Hello</div>
</div>
</div>
</div>
);
});
// Usage
export default function HomePage() {
const ref = useRef();
useEffect(() => {
console.log('in parent', ref);
}, []);
return <Loader ref={ref} />;
}