Désactiver la mise en cache pour antd Tree

Question

J'ai trouvé ceci dans la documentation du composant Antd - Tree.

Le nombre de TreeNodes peut être très grande, mais quand permettre checkable, il passera plus de temps de calcul, nous avons donc mis en cache des calculs (par exemple. this.treeNodesStates), pour éviter la double calcul.

Cette note suggère que l'état de l'arborescence est mis en cache. Lorsque j'ajoute/supprime des nœuds de l'arborescence, l'arborescence ne semble pas s'actualiser. Comment désactiver la mise en cache ou m'assurer que l'ajout/la suppression des noeuds actualise l'arborescence?

Answer 1

Vous pouvez ajouter/supprimer des nœuds dynamiquement. Voir ce codepen http://codepen.io/yesmeck/pen/JEjZmj?editors=001

const { Tree } = antd; 
const TreeNode = Tree.TreeNode; 

class Demo extends React.Component { 
    state = { 
    nodes: [ 
     { title: '1', key: '1' }, 
     { title: '2', key: '2' }, 
     { title: '3', key: '3' }, 
    ] 
    }; 

    handleAdd =() => { 
    const node = { title: (+new Date), key: (+new Date) } 
    this.setState({ nodes: [...this.state.nodes, node] }); 
    }; 

    handleRemove =() => { 
    this.setState({ nodes: this.state.nodes.slice(1) }); 
    }; 

    render() { 
    return (
     <div> 
     <Tree checkable defaultExpandAll> 
      {this.state.nodes.map(node => 
      <TreeNode title={node.title} key={node.key} /> 
     )} 
     </Tree> 
     <button onClick={this.handleAdd}>Add node</button> 
     <button onClick={this.handleRemove}>Remove node</button> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<Demo />, document.getElementById('container'));