如何在React Sortable Tree的特定节点中添加按钮

时间:2018-12-19 17:09:42

标签: reactjs typescript button

我正在使用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>
                        ),
                    })}
                />

仅在某些特定情况下,我可以添加什么以添加按钮?

编辑

Artistic example

想法是仅在节点是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>
),
})}

这是结果:

result

没有更好的方法吗?好习惯,比如不使用title属性?

2 个答案:

答案 0 :(得分:2)

我不知道您的代码是什么样子,但是这样的函数对您有意义吗?

            renderButton = (title) => {
               return title === 'Web Content' ? <button>Your button</button> : null
            }


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

答案 1 :(得分:2)

您可以使用generateNodeProps向渲染的元素添加按钮。有一个专用的buttons道具(我签入了版本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>] : [],
    })}
/>