Question

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

我的节点是在像这样的控制器（是.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，所以我认为将动作传递给Icon的最好方法是通过树，然后在渲染它们时传递到其节点。

我正在像这样扩展树：

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处执行相同操作），如何正确执行此操作？ / p>

在Blueprint.js中扩展组件（树）

0 个答案: