ES6 + React，错误：React.createElement：类型不应为null，undefined，boolean或number

Question

通过ES6学习ReactJS。 尝试实现React-Bootstrap组件。 我也在使用反应路由器。 我正在尝试实现Navbar组件。

这将只是一个带有品牌和搜索框的小玩意。 我打算进一步扩展和使用搜索框组件，因此我将其放在下面自己的单独组件中。

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文件以及用于管理客户端路由的route.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等，但这只是一个猜测。 非常感谢您为解决此问题提供的帮助，谢谢。

Answer 1

您正在使用Button组件而不导入它：

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

正确导入它，该问题应得到解决。