Error 'Draggable' cannot be used as a JSX component.
페이지 정보
본문
antd(ant-design)의 Modal을 드래그 가능하도록 코드를 변경하고 있었는데요. 관련 예제를 참고해서 드래그 기능을 만들다보니 node_module에 Draggable 모듈을 추가해야 했습니다. 아래 코드는 Modal 안에 추가해야 합니다.
modalRender={(modal) => (
<Draggable
disabled={disabled}
bounds={bounds}
onStart={(event, uiData) => onStart(event, uiData)}
>
<div ref={draggleRef}>{modal}</div>
</Draggable>
)}
드래그 관련 함수를 추가하고...
const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
const { clientWidth, clientHeight } = window.document.documentElement;
const targetRect = draggleRef.current?.getBoundingClientRect();
if (!targetRect) {
return;
}
setBounds({
left: -targetRect.left + uiData.x,
right: clientWidth - (targetRect.right - uiData.x),
top: -targetRect.top + uiData.y,
bottom: clientHeight - (targetRect.bottom - uiData.y),
});
};
상태를 관리할 setState를 3개 추가합니다.
const [disabled, setDisabled] = useState(true);
const [bounds, setBounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 });
const draggleRef = useRef<HTMLDivElement>(null);
그리고, package.json의 dependencies에 "react-draggable": "4.4.5" 참조를 추가하세요. 그리고, 터미널에서 npm install 후 동작을 확인 해보면 정상적으로 모달을 드래그할 수 있습니다.
개발자에게 후원하기
추천, 구독, 홍보 꼭~ 부탁드립니다.
여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~
감사합니다~
추천0 비추천0
- 이전글JavaScript에서 배열의 값을 삭제하고, 삭제한 위치에 새로운 내용을 추가하는 방법. (with Array.prototype.splice()) 23.04.22
- 다음글JSX element class does not support attributes because it does not have a 'props' property. 23.04.19
댓글목록
등록된 댓글이 없습니다.