ES6 + React, Fehler: React.createElement: type sollte nicht null, undefined, boolean oder Nummer sein

Question

Learning ReactJS mit ES6. Der Versuch, React-Bootstrap-Komponenten zu implementieren. Ich benutze auch den reagierenden Router. Ich versuche, die Navbar-Komponente zu implementieren.

Es wird nur ein Nabber mit der Marke und einem Suchfeld sein. Ich ziele darauf ab, die Suchfeldkomponente zu erweitern und zu verwenden, also habe ich es in eine eigene separate Komponente unten gelegt.

LocationSearchBox.js

import React, {PropTypes} from 'react' 
import Form, {FormGroup, FormControl} from 'react-bootstrap' 

export default function LocationSearchBox(props) { 
    return (
     <FormGroup> 
      <FormControl type="text" placeholder="Search" /> 
      <Button bsStyle="success" type="submit">Submit</Button> 
     </FormGroup> 
    ) 
} 

Die navber auf allen Seiten sein wird, damit ich es in der obersten Strecke gesetzt und seine Komponente ist die main.js Datei unten zusammen mit routes.js gezeigt Client-Seite zu verwalten Routen.

import React, {Component} from 'react'; 
import {Navbar, NavbarHeader, NavbarBrand, NavbarCollapse} from 'react-bootstrap'; 
import {default as Search} from './LocationSearchBox' 

export default class Main extends Component{ 

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

    render() { 
     return(
      <Navbar> 
       <NavbarHeader> 
        <NavbarBrand> 
         <a href="#">React-Bootstrap</a> 
        </NavbarBrand> 
       </NavbarHeader> 
       <NavbarCollapse> 
        <Search/> 
       </NavbarCollapse> 
      </Navbar> 

     ) 
    } 

} 

routes.js

import React from 'react'; 
import ReactRouter, {Router, Route, IndexRoute, browserHistory} from 'react-router'; 
import Main from '../components/Main'; 

export var routes = (
    <Router history={browserHistory}> 
     <Route path='/' component={Main} /> 

    </Router> 
); 

Index.js ist unten und ist der Eintrag Datei in Webpack/babel

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import {routes} from './config/routes'; 

ReactDOM.render(routes, document.getElementById('root')); 

So zu verwenden, wenn sie Web-Pack-dev-Server ausgeführt , gehen Sie zu localhost: 8080 als Standardport, den die Hauptroute treffen soll. Ich glaube es tut aber ich bekomme Fehler, nämlich 3 gleichartige.

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 `Main`. 

Ich glaube, es könnte darauf zurückzuführen sein, die Art, wie ich die Navbar Komponenten in main.js am importieren, wie NavbarHeader, NavbarCollapse usw., aber das ist eine Vermutung. Ich würde wirklich jede Hilfe bei der Lösung dieses Problems zu schätzen wissen, danke.

Answer 1

Sie sind mit der Button Komponente ohne importieren es:

<Button bsStyle="success" type="submit">Submit</Button> 

Import es richtig und das Problem sollte gelöst werden.