在父组件中给子组件创建ref

在Discord的FE社区中遇到的问题:

im creating a drag/drop component base on jquery ui. as you can see in my code I have to wrap props.children with <div> in order to gain ref on the root element. how do I change my code if I want to remove <div> and use the children root element instead as my droppable?, also what is the difference between ref and itemRef?

import * as React from 'react';
export interface IDroppableProps {
children:React.ReactNode;
className?:string;
model?:any;
onJqDrop?:(item:any,container:any)=>any;
accept?:any;
}
export function Droppable (props: IDroppableProps) {
const ref = React.useRef<HTMLDivElement>();
React.useEffect(()=>{
ref && ref.current && (ref.current["model"] = props.model);
},[props.model]);
React.useEffect(()=>{
ref && ref.current && $(ref.current).droppable({
accept: props.accept,
tolerance: "pointer",
drop:(event, ui)=>{
const draggable = ui.draggable[0];
const droppable = event.target as HTMLElement;
props.onJqDrop && props.onJqDrop(draggable && draggable["model"] || null, droppable && droppable["model"] || null);
}
})
},[ref.current])
return (
<div ref={ref} className={props.className}>
{props.children}
</div>
);
}

解答:

const ref = React.createRef()
class D extends React.Component {
render(){
const children = React.Children.map(this.props.children, child => React.cloneElement(child, {ref}))
return <React.Fragment>{children}</React.Fragment>
}
}
  1. 使用React.createRef创建ref.

  2. 使用React.cloneElement来复制子组件,然后传递ref给子组件