当我尝试创建ReactBootstrap选项卡导航(https://react-bootstrap.netlify.com/)时,实际的可点击选项卡不呈现。我认为这是因为使用this.props.children工作流程是如何工作的。我正在使用JSON对象构建我的DOM:
{
"type": "FRAMEWORK_REGION_DASHBOARDS",
"component": "FrameworkRegionDashboards",
"className": "framework-region region-dashboards react-tab-panel",
"order": 2,
"style": {
"ux": {
"minHeight": "400px"
},
"dnd": {
"minHeight": "502px",
"padding": "10px",
"backgroundColor": "rgb(220, 220, 220)"
}
},
"children": [
{
"type": "DASHBOARD_TAB_OVERVIEW",
"component": "FrameworkDashboardTab",
"className": "tab-pane",
"order": 0,
"title": "Overview",
"visible": true,
"children": [
{
"name": "Device Info",
"type": "PANEL_DASHBOARD_DEVICE_INFO",
"component": "PanelDashboardDeviceInfo",
"order": 0,
"size": {
"h": 1,
"v": 1
}
}
]
}
然后我像这样创建DashboardTab:
return React.createElement(
ReactBootstrap.Tabs,
{
defaultActiveKey: 0,
"id": this.props.component.type,
"name": this.props.component.component,
"className": this.props.component.className,
"style": this.props.component.style[this.props.dnd],
"component": this.props.component
},
this.props.children
)
然后呈现这样的单个标签
return React.createElement(
ReactBootstrap.Tab,
{
"id": this.props.component.type,
"name": this.props.component.title,
"title": this.props.component.title,
"eventKey": this.props.component.order
},
this.props.children
);
但是发生的是,在将选项卡DOM元素的结构添加到DOM的同时,应该包含实际可点击选项卡且标题为空的
所以代替这个
我明白了:
有什么想法吗?