antd tree 드래그 기능사용을 사용하려고 하는데 도움 부탁드립니다 ㅠㅠ

Question

https://ant.design/components/tree/#components-tree-demo-draggable antd tree 드래그 데모를 그대로 가져와서 사용하려고 하는데 에러가 발생합니다. 2가지로 시도해보았습니다. 1. ReactDom.render(...) 마지막 줄을 아래 코드로 수정, [결과 : 트리자체가 안보입니다.] Warning: Did not expect server HTML to contain a

in

. 위 에러가 발생하는데, 상관없다고 하신글을 보았습니다. 1-1. LeftTree.js (Demo의 index.js 참고) //ReactDOM.render(, document.getElementById('container')); if ( typeof window !== 'undefined' ) { ReactDOM . render ( < Demo /> , document . getElementById ( ' container ' )); } 1-2. index.js (Demo의 index.html 참고) const Note = () => { const [ callapse , setCollapse ] = useState ( false ); const onCollapse = useCallback (() => { setCollapse (! callapse ); }, [ callapse ]); const tree = useRef (); return ( < ContentLayout title = "Note" onCollapse = { onCollapse } > < Head > < meta charSet = "utf-8" /> < title > Note | NodeMap < div style = { { display : "flex" } } > < div > < Button > 작성하기 < div id = "container" style = { { padding : "24px" } } /> < script > var mountNode = document.getElementById('container'); < NoteTab /> ) }; export default Note ; ---------------------------------------------------------------------------------------------------------------------- 2. export default LeftTree 로 수정, [결과: 트리는 보여지는데, 에러발생] 일부 treenode의 세모표시(트리 접기, 열기)를 클릭하거나, 일부 트리노드를 선택, 드래그시 에러가 발생합니다. 2-1. LeftTree.js //ReactDOM.render(, document.getElementById('container')); export default LeftTree ; LeftTree.js에서 마지막줄만 export default LeftTree; 로 수정 했을 경우, 아래 메세지가 발생합니다. Unhandled Runtime Error TypeError: Cannot read property 'offsetHeight' of null 화면과 데이터가 일치 하지 않아서 생기는 것 같은데, next를 사용해서 그런건지... 정확한 이유와 해결방법을 모르겠습니다. 2-2. index.js const Note = () => { const [ callapse , setCollapse ] = useState ( false ); const onCollapse = useCallback (() => { setCollapse (! callapse ); }, [ callapse ]); const tree = useRef (); return ( < ContentLayout title = "Note" onCollapse = { onCollapse } > < Head > < meta charSet = "utf-8" /> < title > Note | NodeMap < div style = { { display : "flex" } } > < div > < Button > 작성하기 < LeftTree /> < NoteTab /> ) }; export default Note ; 감사합니다.

제로초(조현영) · Answer

이 부분은 저도 tree를 사용해보지 않아서 정확한 답변이 어렵습니다. 예시가 구현이 되지 않습니다.