Question

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

treeNode的数量可能非常大，但是当启用可检查时，它将花费更多的计算时间，因此我们缓存了一些计算（例如 this.treeNodesStates），以避免双重计算。

本说明建议缓存Tree状态。当我从树中添加/删除节点时，树似乎没有刷新。我应该如何禁用缓存或确保添加/删除节点刷新树？

Answer 1

您可以动态添加/删除节点。请参阅此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'));

禁用antd Tree的缓存

1 个答案: