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>

正確導入它，該問題應得到解決。