将Button组件传递给Bootstrap Tab组件的标题支柱

Question

我使用的反应-引导标签组件，并希望包括一个按钮在标签标题。要设置标题的文本，必须将所需的文本作为支持传递。我想包括一个按钮，以删除选项卡，出现在文本旁边。

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

<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引导tab组件，但能够呈现选项卡标题和按钮，以删除上述选项卡。下面是我从react引导实现的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>