useRef type on React Draggable

Question

我对编码比较陌生，特别是对Typescript。我试图创建一个React Draggable模态，当窗口调整大小并移动模态时改变其边界，因此它永远不会离开窗口。我已经创建了一个这样做的函数，但我正在努力为实际可拖动的refdraggableRef使用正确的类型。draggableRef是什么类型的?无论我把它改成什么，.state.x;上的modalOffsetLeft都有问题，它不存在。或者，还有其他方法吗?谢谢!

下面是代码:

export const DraggableModal: React.FC<DraggableModalProps> = ({
draggableProps,
onClose,
}) => {
const [bounds, setBounds] = useState({
width: 0,
height: 0,
});
const ref = useRef<HTMLDivElement>(null);
const draggableRef = useRef<DraggableCore>(null);
const rootWindow = document.getElementById('root') as HTMLDivElement;

const getValues = () => {
if (ref.current !== null && draggableRef.current !== null) {
const modalWidth = ref?.current?.clientWidth;
const draggableWindowWidth = rootWindow?.clientWidth - modalWidth;
const modalOffsetLeft = draggableRef?.current?.state.x;
setBounds({
width: draggableWindowWidth,
height: rootWindow?.clientHeight - ref.current.offsetHeight,
});
if (modalOffsetLeft > draggableWindowWidth) {
draggableRef.current.state.x = draggableWindowWidth;
}
}
};
useEffect(() => {
getValues();
}, []);
parent.onresize = getValues;
return (
<Draggable
ref={draggableRef}
bounds={{
left: 0,
top: 0,
right: bounds.width,
bottom: bounds.height,
}}
{...draggableProps}
handle="#handle"
>
<DraggableWrapper>
...
</DraggableWrapper>
....

Answer 1

使用ref try创建一个状态{x,y}，然后更新这个x和y，而不是更新它的x,y。然后通过x和y来定位Draggable中的道具。

顺便说一下，通过将函数添加到一个侦听器中，当窗口发生变化时运行，可以以更清晰的方式运行函数获取值。