我正在使用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>
),
})}
这是结果:
没有更好的方法吗?好习惯,比如不使用title属性?
答案 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>] : [],
})}
/>