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