Как добавить кнопку в конкретный узел реагирующего сортируемого дерева

Question

Я работаю с библиотекой реагирования 'реагирующее на сортировку дерево', и я не знаю, как добавить кнопки только к определенному типу узлов.Например, элемент в узле имеет определенное значение, мне нужно добавить кнопку, чтобы что-то сделать.

                <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>
                        ),
                    })}
                />

Что я могу добавить к этому компоненту, чтобы добавить кнопку только в каком-то конкретном случае?

РЕДАКТИРОВАТЬ

Идея заключается в добавлении кнопки только в том случае, если узел является веб-контентом

На самом деле я делаю это так:

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>
),
})}

и вот результат:

Нетлучший способ сделать это?хорошая практика, например, не использовать свойство title?

Answer 1

Вы можете использовать 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>] : [],
    })}
/>

Answer 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>
                    ),
                })}
            />