为 antd Tree 禁用缓存

Question

我在 Antd - Tree 组件的文档中找到了这个。

The number of treeNodes can be very large, but when enable checkable, it will spend more computing time, so we cached some calculations(e.g. this.treeNodesStates), to avoid double computing.

此注释表明 Tree 状态已缓存。当我从树中添加/删除节点时，树似乎没有刷新。我应该如何禁用缓存或确保节点的添加/删除刷新树？

Answer 1

您可以 add/delete 动态节点。请参阅此代码笔 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'));

为 antd Tree 禁用缓存

Disable caching for antd Tree

reactjs

antd