ES6 + React、Error：React.createElement：型がnull、未定義、ブール値、または数値であってはなりません。

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> 
    ) 
} 

navberはので、私は一番上のルートでそれを入れていると、そのコンポーネントは、クライアント側を管理するためのroutes.jsとともに、以下に示すMain.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は以下の通りです、私はウェブパック-devのサーバーを実行したときに

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

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

だから、WebPACKの/バベルで使用するエントリファイルがあります、メインルートが当たっているはずのデフォルトポートとして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`. 

は、私はそれが道に私は、このようななどNavbarHeader、NavbarCollapseとしてMain.jsでのナビゲーションバーのコンポーネントを、インポートしていますが、それは推測であるためであるかもしれないと考えています。私は本当にこの問題を解決するための助けに感謝します、ありがとう。

Answer 1

あなたはそれがをインポートせずButtonコンポーネントを使用して次のとおりです。

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

は正しくそれをインポートし、問題が解決されなければなりません。