将 Button 组件传递给 Bootstrap Tab 组件的 Title 属性

Question

我正在使用react-bootstrap选项卡组件，并希望在选项卡标题中包含一个按钮。要设置标题文本，您必须将所需的文本作为 props 传递。我想在文本旁边添加一个用于删除选项卡的按钮。

我尝试传递一个返回按钮元素的函数，但选项卡标题中没有显示任何内容。

<Tab eventKey={data.name} title={data.name}>
    <Button 
         className={classes.Button} 
         variant="secondary" 
         onClick={() => removeData({ id: data.id })}
         >X</Button>
    <TemplateTabs name={data.name} />
 </Tab>

现在，上面的代码在选项卡页面内呈现按钮，而所需的位置将在选项卡标题中。模板选项卡组件是选项卡页中显示的内容。理想情况下，我正在寻找一种方法来继续使用react-bootstrap选项卡组件，但能够渲染选项卡标题和按钮以删除所述选项卡。下面是我从react-bootstrap 实现的Tab 组件的文档。如果有更多信息有用，请告诉我。

https://react-bootstrap.github.io/components/tabs/

Answer 1

文档说类型node： https ://react-bootstrap.github.io/components/tabs/#tab-props

所以这应该有效：

<Tab
    eventKey={data.name}
    title={
        <>
            {data.name}
            <Button
                className={classes.Button}
                variant="secondary"
                onClick={() => removeData({ id: data.id })}>
                X
            </Button>
        </>
    }>
    <TemplateTabs name={data.name} />
</Tab>