将按钮组件传递到引导选项卡组件的标题道具

Question

我正在使用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>

Answer 1

文档说明类型节点: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>