react 日常遇坑

记录日常开发中遇到的问题（组件来自antdesign）

1. Tree组件：展开同级目录时，不会关闭前一个目录。所以在expandedKeys中追踪展开目录时，数组中的元素是所有展开节点的集合，不是很方便获取。于是，通过修改onExpand事件，每展开一个目录，则关闭上一个。具体代码如下：

// tree展开事件
  treeOnExpand (expandedKeys,e) {
    if (e.node.props.pos.split('-').length === 3) {
      if (e.node.props.expanded) {
        this.state.treeList[1]--;
      } else {
        this.state.treeList[1]++;
      }
      if (this.state.treeList[1] >= 2) {
        expandedKeys.splice(1,1);
        this.state.treeList[1]--;
      }
    }
    if (e.node.props.pos.split('-').length === 2) {
      if (e.node.props.expanded) {
        this.state.treeList[0]--;
      } else {
        this.state.treeList[0]++;
      }
      if (this.state.treeList[0] >= 2) {
        expandedKeys.splice(0,expandedKeys.length - 1);
        this.state.treeList[0] = 1;
        this.state.treeList[1] = 0;
      }
    }
  }

    <Tree
        onExpand={this.treeOnExpand}
        expandedKeys={expandedKeys}
        autoExpandParent={autoExpandParent}
        onSelect={this.onSelect}
      >

通过修改expandedKeys的值，控制展开的层次。
2. TreeSelect: 由于下拉框展开是树形结构，同样面临展开层次太多的问题。node.props.root通过root属性，可以获取到展开的轨迹。轨迹的第一个元素为展开首节点，然后最后一个节点为展开的最后一个节点，由于项目最多只有三层结构，所以只要在expandedKeys取第一个和最后一个即可。问题在于该表单提交后，可能会再次编辑，所以内容需要再次填充。但是发现TreeSelect的展开轨迹仍然存在，并发生了错乱。导致第二次选择节点时，取到的数据错误。解决方案：

 <TreeSelect  style={{ width: '100%' }} dropdownStyle={{ maxHeight: 400,overflow: 'auto' }} treeData={databaseTree} placeholder="请选择主实体" treeDefaultExpandedKeys={[]} onSelect={(value, node,extra) => { ...... }} />

通过treeDefaultExpandedKeys={[]}设置默认值的方式，解决展开层次混乱的问题。 3.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!