小编mar*_*ind的帖子

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

我正在使用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 组件的文档。如果有更多信息有用,请告诉我。

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

reactjs react-bootstrap

1
推荐指数
1
解决办法
1518
查看次数

标签 统计

react-bootstrap ×1

reactjs ×1