https://ant.design/components/tree/#components-tree-demo-draggable
antd tree 드래그 데모를 그대로 가져와서 사용하려고 하는데 에러가 발생합니다.
2가지로 시도해보았습니다.
1. ReactDom.render(...) 마지막 줄을 아래 코드로 수정, [결과 : 트리자체가 안보입니다.]
Warning: Did not expect server HTML to contain a <div> in <div>.
위 에러가 발생하는데, 상관없다고 하신글을 보았습니다.
1-1. LeftTree.js (Demo의 index.js 참고)
//ReactDOM.render(<Demo />, 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</title>
</Head>
<div style={{display:"flex"}}>
<div>
<Button>작성하기</Button>
<div id="container" style={{padding: "24px"}} />
<script>var mountNode = document.getElementById('container');</script>
</div>
<NoteTab />
</div>
</ContentLayout>
)
};
export default Note;
----------------------------------------------------------------------------------------------------------------------
2. export default LeftTree 로 수정, [결과: 트리는 보여지는데, 에러발생]
일부 treenode의 세모표시(트리 접기, 열기)를 클릭하거나, 일부 트리노드를 선택, 드래그시 에러가 발생합니다.
2-1. LeftTree.js
//ReactDOM.render(<Demo />, 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</title>
</Head>
<div style={{display:"flex"}}>
<div>
<Button>작성하기</Button>
<LeftTree />
</div>
<NoteTab />
</div>
</ContentLayout>
)
};
export default Note;
감사합니다.
