reactjs - 如何在 react 排序树的特定节点中添加按钮

Question

我正在使用 react 库“react-sortable-tree”，但我不知道如何仅向特定类型的节点添加按钮。例如，节点中的元素具有特定值，我需要添加一个按钮来执行某些操作。

                <SortableTree
                    canDrop={canDrop}
                    getNodeKey={({ node }) => node.id}
                    treeData={this.state.treeData}
                    onChange={this.onChange}
                    generateNodeProps={({ node, path }) => ({
                        title: (
                            <a href={node.url}>{node.title}</a>
                        ),
                    })}
                />

为了仅在某些特定情况下添加按钮，我可以向该组件添加什么？

编辑



想法是仅当节点是 Web 内容时才添加按钮

实际上我是这样做的:

generateNodeProps={({ node, path }) => ({
title: (
    <Row>
        <Col xs={6} sm={6} md={6} lg={6}>
            <a href={node.url}>{node.title}</a>
        </Col>
        <Col xs={6} sm={6} md={6} lg={6}>
            {node.isWebContent &&
                <DefaultButton text='Open editor' />
            }
        </Col>
    </Row>
),
})}

这是结果:



没有更好的方法来做到这一点吗？一个很好的做法，就像不使用标题属性一样？

Answer 1

您可以使用 generateNodeProps向渲染元素添加按钮。有专门的buttons prop(我检查了 2.5.2 和 2.2.0 版，但我相信它也更早可用)。
例子:

<SortableTree
    canDrop={canDrop}
    getNodeKey={({ node }) => node.id}
    treeData={this.state.treeData}
    onChange={this.onChange}
    generateNodeProps={extendedNode => ({
        title: (
            <a href={extendedNode.node.url}>{extendedNode.node.title}</a>
        ),
        buttons: extendedNode.node.title === "Web Content" ? [<button>X</button>] : [],
    })}
/>