ReactBootstrap无法使用React子项正确呈现选项卡

时间:2020-01-10 19:06:42

标签: reactjs react-bootstrap children react-props

当我尝试创建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的同时,应该包含实际可点击选项卡且标题为空的

所以代替这个

How it should look

我明白了:

How it actually looks

有什么想法吗?

0 个答案:

没有答案