ES6 + React，错误：React.createElement：type不应为null，undefined，boolean或number(ES6+React, Error:React.createElement: type should not be null, undefined, boolean, or number)

 用ES6学习ReactJS。 尝试实现React-Bootstrap组件。 我也在使用react路由器。 我正在尝试实现Navbar组件。 
 
 它只是一个品牌和搜索框的nabber。 我的目标是扩展和使用搜索框组件，所以我将它放在下面的独立组件中。 
 
 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>
    )
}
 
 导航器将位于所有页面上，因此我将其放在最顶层的路径中，其组件是下面显示的Main.js文件以及用于管理客户端路由的routes.js。 
 
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在下面，是Webpack / babel中使用的入口文件 
 
import React from 'react';
import ReactDOM from 'react-dom';
import {routes} from './config/routes';

ReactDOM.render(routes, document.getElementById('root'));
 
 因此，当我运行web pack-dev-server时，请转到localhost：8080作为主路由应该命中的默认端口。 我相信它确实如此，但我得到了错误，即3个同类错误。 
 
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`.
 
 我相信这可能是由于我在Main.js中导入Navbar组件的方式，例如NavbarHeader，NavbarCollapse等，但这是猜测。 我非常感谢你解决这个问题的任何帮助，谢谢。 

Learning ReactJS with ES6. Trying to implement React-Bootstrap components. I am also using the react router. I am trying to implement the Navbar component. 
 
It will just be a nabber with the brand and a search box. I aim to expand and use the search box component a lot more so I have put it in its own separate component below.
 
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>
    )
}
 
The navber will be on all pages so I have put it in the topmost route and its component is the Main.js file shown below along with routes.js to manage client side routes.
 
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 is below and is the entry file to use in Webpack/babel
 
import React from 'react';
import ReactDOM from 'react-dom';
import {routes} from './config/routes';

ReactDOM.render(routes, document.getElementById('root'));
 
So when i run web pack-dev-server, go to localhost:8080 as the default port the main route should be hitting. I believe it does but I get errors, namely 3 of the same kind.
 
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`.
 
I believe it might be due to the way I am importing the Navbar components in Main.js, such as NavbarHeader, NavbarCollapse etc but that is a guess. I would really appreciate any help in solving this issue, thank you.

原文：https://stackoverflow.com/questions/38807169