Ошибка рендеринга компонентов реакции-бутстрапа

Question

Я недавно перешел из использования twitter-bootstrap в классы реагирования с использованием реакционной бутстрапа. Я хотел протестировать реактивную загрузку Navbar. Мой код как:

import React from 'react'; 
import { Link } from 'react-router'; 
import Radium from 'radium'; 
import Grid from 'bootstrap-grid-react'; 
import * as bootstrap from "react-bootstrap"; 


export default class Layout extends React.Component { 

    constructor() { 
     super(); 
     this.state = {}; 
    } 

    render() { 
     let {Nav, Navbar, NavItem, NavDropdown, MenuItem} = bootstrap; 
     return (
      <div> 
       <Navbar> 
        <Navbar.Header> 
         <Navbar.Brand> 
         <a href="#">APITest</a> 
         </Navbar.Brand> 
        </Navbar.Header> 
        <Nav> 
         <NavItem eventKey={1} href="#">New user 
         </NavItem> 
         <NavItem eventKey={2} href="#">Create New User</NavItem> 
         <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown"> 
         <MenuItem eventKey={3.1}>Action</MenuItem> 
         <MenuItem eventKey={3.2}>Another action</MenuItem> 
         <MenuItem eventKey={3.3}>Something else here</MenuItem> 
         <MenuItem divider /> 
         <MenuItem eventKey={3.3}>Separated link</MenuItem> 
         </NavDropdown> 
        </Nav> 
       </Navbar> 
      </div> 

     ) 
    } 
} 

Однако это дает мне ошибку

Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of Layout .

и предупреждение:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of Layout .

Я также попытался с помощью import {Nav, Navbar, NavItem, NavDropdown, MenuItem} from 'react-bootstrap', но он также не будет работать. Существует определенная проблема в том, как я использую Navbar, потому что нормальный div рендеринга просто отлично.

Любая помощь действительно оценена.

Answer 1

После долгого времени, борясь с этим, я, наконец, получил его, чтобы проблема была связана с дополнительным div над Navbar.

Это мой последний рабочий код:

import React from 'react'; 
import { Link } from 'react-router'; 
import Radium from 'radium'; 
import Grid from 'bootstrap-grid-react'; 
import {Nav, Navbar, NavItem, NavDropdown, MenuItem} from "react-bootstrap"; 


export default class Layout extends React.Component { 

    constructor() { 
     super(); 
     this.state = {}; 
    } 

    render() { 
     return (
       <Navbar> 
        <Navbar.Header> 
         <Navbar.Brand> 
         <a href="#">APITest</a> 
         </Navbar.Brand> 
        </Navbar.Header> 
        <Nav> 
         <NavItem eventKey={1} href="#">New user 
         </NavItem> 
         <NavItem eventKey={2} href="#">Create New User</NavItem> 
         <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown"> 
         <MenuItem eventKey={3.1}>Action</MenuItem> 
         <MenuItem eventKey={3.2}>Another action</MenuItem> 
         <MenuItem eventKey={3.3}>Something else here</MenuItem> 
         <MenuItem divider /> 
         <MenuItem eventKey={3.3}>Separated link</MenuItem> 
         </NavDropdown> 
        </Nav> 
       </Navbar> 

     ) 
    } 
} 

Я до сих пор не знаю причины ошибки при обернув Navbar в делах. Не стесняйтесь комментировать любое объяснение.

Answer 2

После борьбы с этим для слишком долго, я обнаружил, что проблема заключается в Link компонент, который вы используете от реагировать-маршрутизатор. Я не совсем уверен в специфике ошибки, но есть решение. Вместо использования Ссылка Использовать LinkContainer Компонент, созданный agent-bootstrap-routerhttps://github.com/react-bootstrap/react-router-bootstrap.

Из реагирующих маршрутизаторами-самозагрузки документы:

npm i -S react-router-bootstrap 

В вашем использовании кода:

<LinkContainer to={{ pathname: '/foo', query: { bar: 'baz' } }}> 
    <Button>Foo</Button> 
</LinkContainer>