antd 踩坑:為什麼 Tree defaultExpandAll defaultExpandedKeys 在重新整理後會失效?
阿新 • • 發佈:2020-08-11
原因其實很簡單。
<Tree onSelect={handleTreeClick} defaultExpandedKeys={[rootOrgId]}> {this.renderTreeNodes(OrgTreeData.children)} </Tree>
renderTreeNodes = data => { if (!Array.isArray(data)) { return <></>; } return data.map(item => {if (item.children && item.children.length > 0) { return ( <TreeNode title={item.title} key={item.key} dataRef={item}> {this.renderTreeNodes(item.children)} </TreeNode> ); } return <TreeNode key={item.key} dataRef={item} {...item} />; }); };
如果樹節點資料時從介面獲取的,那麼,這樣寫就會有一個問題:
當 Tree 渲染的時候, TreeNode 還沒有渲染!
也就是說,Tree 和 TreeNode 渲染不是同步的。
這樣當然會造成各種問題。只是碰到了這個而已。
解決方法很簡單,讓他們一起渲染就行。
{ OrgTreeData && OrgTreeData.children ? <Tree onSelect={handleTreeClick} defaultExpandedKeys={[rootOrgId]}> {this.renderTreeNodes(OrgTreeData.children)}</Tree> : <></> }
以上。