2

我想要做的是向我的树添加一个新属性，然后将其传递给它的treeNodes. 原因是我的子节点具有secondaryLabel. 我想使用该标签在点击时向我的 redux 商店发送一个操作。因此，在渲染我的组件时，我想将此操作传递给我的树，然后将其传递给相关节点。如果这是一个不好的方法，请在这里阻止我！

我的节点是在控制器（这是一个.ts文件）中创建的，如下所示：

  files.push({
    id: generateKey(fileName), isDirectory: false, label: fileName,
    filePath: fullPath, isExpanded: false, icon: 'document',
    secondaryLabel: React.createElement(Icon, {icon: 'add', className: 'hoverIcon', iconSize: 16})})

由于我正在使用React.createElement，我认为将我的操作传递给图标的最佳方式是通过树，然后在渲染它们时传递给它的节点。

我正在像这样扩展树：

export interface ICustomTreeProps<T = {}>  {
  onNodeAdd?: TreeEventHandler<T>
}

export class CustomTree<T = {}> extends Tree<ICustomTreeProps> {
}

这就是我的问题开始的地方：Tree它的大部分函数都声明为private. 我想扩展它的renderNodes功能以将我的操作传递给节点。但是函数本身及其传递的所有内容也是私有的（https://github.com/palantir/blueprint/blob/develop/packages/core/src/components/tree/treeNode.tsx）

 private renderNodes(treeNodes: Array<ITreeNode<T>>, currentPath?: number[], className?: string): JSX.Element {
        if (treeNodes == null) {
            return null;
        }

        const nodeItems = treeNodes.map((node, i) => {
            const elementPath = currentPath.concat(i);
            const TypedTreeNode = TreeNode.ofType<T>();
            return (
                <TypedTreeNode
                    {...node}
                    key={node.id}
                    contentRef={this.handleContentRef}
                    depth={elementPath.length - 1}
                    onClick={this.handleNodeClick}
                    onContextMenu={this.handleNodeContextMenu}
                    onCollapse={this.handleNodeCollapse}
                    onDoubleClick={this.handleNodeDoubleClick}
                    onExpand={this.handleNodeExpand}
                    onMouseEnter={this.handleNodeMouseEnter}
                    onMouseLeave={this.handleNodeMouseLeave}
                    path={elementPath}
                >
                    {this.renderNodes(node.childNodes, elementPath)}
                </TypedTreeNode>
            );
        });

        return <ul className={classNames(Classes.TREE_NODE_LIST, className)}>{nodeItems}</ul>;
    }

由于我不想基本上复制粘贴整个内容以扩展单个属性（然后也对TreeNode应该发生操作的位置执行相同操作），我该如何正确执行此操作？

4

0 回答 0