Блог

Здесь у меня есть выбор дерева, который я реализовал с помощью antd 3.x, и теперь я пытаюсь перенести rc-дерево. Поэтому я визуализировал свое дерево, используя список с типом TreeNodeType [], как показано ниже

тип.ts

 export interface TreeItem {
  compositeKey: string;
  title?: string;
  totalLeafs?: number;
  level: number;
  totalChildren?: number;
}

export interface TreeNodeType extends TreeItem {
  title: string;
  parent?: TreeNodeType;
  children?: TreeNodeType[];
  allChildrenLoaded?: boolean;
  hasChildren?: boolean;
}

 

TreeView.ts

 const renderTreeNodes = useCallback(
    (nodes: TreeNodeType[], level: number = 1): React.ReactNode =>
      nodes
        .filter(item => !hiddenKeys.includes(item.compositeKey))
        .map(item => {
          return (
            <TreeNode
              title={treeNodeRenderFn ? treeNodeRenderFn(item) : item.title}
              key={item.compositeKey}
              isLeaf={
                level === treeDepth ||
                (item.allChildrenLoaded amp;amp; isEmpty(item.children)) || !item.hasChildren
              }
              // here we can't have itemRef with rc-tree but we can in antd3.x
              itemRef={item}
            >
              {item.children amp;amp; renderTreeNodes(item.children, level   1)}
            </TreeNode>
          );
        }),
    [treeDepth, hiddenKeys, treeNodeRenderFn, loading]
  );
 

Но дело в том, что мы можем хранить ссылку на каждый узел, например itemRef. Но rc-дерево не поддерживает это. Но рендеринг, как показано ниже, мне нужно иметь ссылку на каждый узел дерева(например, itemRef в приведенном выше коде), поскольку я должен использовать его следующим образом.

 const handleExpand = (_: string[], info: AntTreeNodeExpandedEvent) => {
    dispatch({
      type: ActionType.changeExpandedNodes,
      payload: {
        expanded: info.expanded,
        keys: [info.node.props.itemRef.compositeKey],
      },
    });
    onExpand amp;amp; onExpand(info.node.props.itemRef, info.expanded);
  };
 

компонент rc-дерева не поддерживает ссылку на itemRef, как в antd3.x

Итак, я перепробовал множество способов преодоления этой проблемы. пожалуйста, помогите мне найти решение.