Reactjs 如何自定义react bootstrap上的选项卡自定义

我正在使用此站点的react引导：

我想知道如何自定义这样的选项卡（在选项卡部分）：

const tabsInstance=(
表1内容
表2内容
表3内容
);
render（tabsInstance，mountNode）；

---

我想添加一个十字按钮来关闭它，但我没有找到如何做到这一点。您能帮我吗？

我看不出引导和此React包装器默认支持您想要的行为。我建议使用的技术是扩展Tabs组件以实现您想要的功能，如下所示：

看看其他人是如何使用JQuery在较旧版本的引导中添加此行为的：

---

使用它给自己一个想法，然后创建一个新组件或使用composition扩展现有选项卡组件：

您可以使用react js创建选项卡

反应js选项卡演示：

var tabData=[
{name:'Tab 1'，isActive:true}，
{name:'Tab 2'，isActive:false}，
{name:'Tab 3'，isActive:false}
];
var Tabs=React.createClass({
render:function（）{
返回(

{tabData.map（函数（tab）{
返回(
);
}.bind（this））}

);
}
});
var Tab=React.createClass({
render:function（）{
返回(


);
}
});
var Content=React.createClass({
render:function（）{
返回(
{this.props.activeTab.name==='Tab 1'？
内容1
培根火腿汉堡kevin boudin臀部leberkas.排骨kielbasa shankle汉堡包舌干猪排bresaola.肩胛肉肚皮短腰肉条牛排火腿法兰克福.牛肉kevin t骨鹿肉猪肉肚皮肉丸chuck短腰肉bresaola doner picanha.Cupim短腰肉胸肉培根后腿肉猪鹿肉t骨drumstic猪排汉堡包肉丸。法兰克福猪里脊香克利猪皮卡哈熏牛肉。法兰克福猪里脊肉片鹿肉短里脊
肩胛肉猪丸子尖鹿肉波切塔。卡皮科拉牛肉丸，三尖牛排凯文·乔尔·库皮姆鹿肉。舌肥背牛里贝耶·勒贝卡斯比尔顿t形骨。班切塔法兰克福肉糕，猪t形骨皮卡纳火腿肥背鸡鸡腿短腰肉库皮姆短排骨牛。牛肉短排骨里贝耶肉丸米格农·安杜耶法兰克福西南牛扒牛扒牛扒牛扒牛扒牛扒牛扒牛扒牛扒牛扒牛扒牛扒牛扒牛扒牛扒牛扒牛扒
：null}
{this.props.activeTab.name==='Tab 2'？
内容2
大西洋鲱鱼水母暹罗斗鱼鳕鱼：皮匠蛇头海乌鸦！淡水鲨鱼军士长粘着鱼清洁工加尔琼鱼泥鱼长颚泥吸盘。死亡谷幼鱼鲳鱼电鳐锌凝胶非洲玻璃鲶鱼鳞鱼黄尾鲷grunt sculpin

梭子鱼带锯尾鱼普通tunny，黄鳍石斑鱼珍珠鲈月眼三齿河豚孟加拉达尼奥。黑海鲈鱼大菱鲆，“北凤尾鱼红鲸鱼；红马吸盘”菲力鱼黄杰克日本鳗鱼长鳍嗅星探蜥蜴黄织女比目鱼白黄鱼粉红鲑鱼太平洋鲱鱼，嗅粉红鲑鱼杰克华莱哥！黄杰克阿方西诺梭子鱼，黄尾领狗鱼河豚裁缝鳗鲡银鱼；小齿锯鱼——海鲢鲍鱼巨古拉米o、 半鳃圆头黑龙鱼：鲱鱼之王
：null}
{this.props.activeTab.name==='Tab 3'？
内容3
萝卜、绿叶、雅罗、大米、芦笋、甘蓝、花椰菜、海生莴苣、大头菜、苋菜、菠菜、鳄梨、大豆、卷心菜、芦笋、冬马齿苋、甘蓝、芹菜、马铃薯、葱、沙漠葡萄干、辣根、菠菜、胡萝卜、大豆、莲藕、菠菜、茴香、玉米、笋、绿豆、瑞士甜菜、海葵、南瓜、洋葱、鹰嘴豆、克玉米豌豆、抱子甘蓝、芫荽、菱角、葫芦、瑞士甜菜、大头菜、甜菜根、胡萝卜、豆瓣菜、玉米苋菜、盐芥、布尼亚、坚果、紫苏、豆角、繁缕、马铃薯、甜椒、朝鲜蓟
甜菜根菠菜秋葵菱角大米豌豆catsear小胡瓜夏马齿苋菠菜芝麻菜豌豆tatsoi茄子葱灌木番茄甘蓝萝卜萝卜菊苣salsify豌豆芽蚕豆花生花椰菜芝麻菜
：null}
);
}
});
var App=React.createClass({
getInitialState:函数（）{
返回{
activeTab:tabData[0]
}
}, 
handleClick：功能（选项卡）{
this.setState（{activeTab:tab}）；
},
render:function（）{
返回(
);
}
});
反应(
,
document.getElementById（'app'）
);
#应用程序{
高度：100vh；
}
.导航{
填充：10px 10px 0；
背景：#333；
}
.可见{
边框：实心1px红色；
}
部分{
利润率：20px；
}
h2，p{
保证金：0；
}
谢谢你的建议，我会试试的
const tabsInstance = (
  <Tabs defaultActiveKey={2}>
    <Tab eventKey={1} title="Tab 1">Tab 1 content</Tab>
    <Tab eventKey={2} title="Tab 2">Tab 2 content</Tab>
    <Tab eventKey={3} title="Tab 3" disabled>Tab 3 content</Tab>
  </Tabs>
);

ReactDOM.render(tabsInstance, mountNode);