Problème d'erreur de réagir-composants bootstrap

J'ai récemment migré de l'utilisation de Twitter-bootstrap dans les classes réactives à l'aide de réactive-bootstrap. Je voulais tester la fonction-boot-bootstrap Navbar. Mon code est comme:

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> ) } } 

Cependant, cela me donne une erreur

Erreur non détectée: Violence invariante: le type d'élément est invalide: une chaîne attendue (pour les composants intégrés) ou une classe / fonction (pour les composants composites) mais a obtenu: non défini. Vérifiez la méthode de rendu de la Layout .

Et un avertissement:

• Comment obtenir l'élément d'un événement jQuery on () à l'aide d'une fonction de flèche ES6?
• Pourquoi Babel a-t-il quelques transformations de code (inutiles)
• JavaScript ecma6 change la fonction normale en fonction de la flèche
• Delay batch GET demandes au serveur, JavaScript
• Babel-eslint ne permet pas une importation dynamique

Avertissement: React.createElement: type ne doit pas être nul, indéfini, booléen ou numéro. Il devrait s'agir d'une chaîne (pour les éléments DOM) ou d'une ReactClass (pour les composants composites). Vérifiez la méthode de rendu de la Layout .

J'ai également essayé d'utiliser l' import {Nav, Navbar, NavItem, NavDropdown, MenuItem} from 'react-bootstrap' mais cela ne fonctionnera pas non plus. Il existe certainement un problème dans la façon dont j'utilise Navbar car une div normale rend très correct.

Toute aide est vraiment appréciée.

• Proxying une fonction récursive
• Comment utiliser l'importation es6 pour les images
• Syntaxe pour l'importation de fonctions à partir de modules dans ES6
• Avons-nous besoin d'importer React ou simplement {Component, PropTypes} le fera?
• Quelle est la définition technique d'un Javascript iterable et comment testez-vous cela?

 npm i -S react-router-bootstrap 

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

 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> ) } }