ES6+React, Error:React.createElement: type should not be null, undefined, boolean, or number

Question

用 ES6 学习 ReactJS。尝试实现 React-Bootstrap 组件。我也在使用反应路由器。我正在尝试实现 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>
    )
}

navber 将出现在所有页面上，所以我将其放在最顶层的路由中，其组件是下面显示的 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 等，但这是一个猜测。如果您能帮助解决这个问题，我将不胜感激。谢谢。

Answer 1

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

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

正确导入，问题应该解决了。

ES6+React, Error:React.createElement: type should not be null, undefined, boolean, or number

ES6+React, Error:React.createElement: type should not be null, undefined, boolean, or number

javascript

ecmascript-6

reactjs

react-bootstrap