React Bootstrap неправильно отображает вкладки с дочерними элементами React - PullRequest
Новая
       39

React Bootstrap неправильно отображает вкладки с дочерними элементами React

0 голосов
/ 10 января 2020

Когда я пытаюсь создать React Bootstrap Navs nav (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
                    }
                  }
                ]
              }

И я создаю вкладки DashboardTabs следующим образом: 

        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

Есть мысли?

...