ES6 + React, 오류 : 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')); 

그래서 웹팩/바벨에서 사용하는 입력 파일입니다 , 주 라우트가 부딪쳐 야하는 기본 포트로 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의 Navbar의 구성 요소를 수입하고 있지만,이 추측 인해 수 있습니다 생각합니다. 이 문제를 해결하는 데 도움을 주시면 감사하겠습니다. 감사합니다.

Answer 1

당신은 그것을을 가져 오지 않고 Button 구성 요소를 사용하여 있습니다

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

가져 오기 그것을 제대로 문제가 해결되어야한다.