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

【问题标题】：Passing a Button Component to the Title prop of a Bootstrap Tab Component将 Button 组件传递给 Bootstrap Tab 组件的 Title 属性
【发布时间】：2020-01-03 21:55:50
【问题描述】：

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

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

<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/

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案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>

【讨论】：