React.createElement：タイプnullにすべきではない、未定義の...作成するときに/レンダリングコンポーネント

Question

次のように完全なエラーがある...

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 `IndexBody. 

私は、なぜ私はこのエラーを受けてるかわかりません私は自分のコンポーネントを適切に作成したと思っていましたが、別の目で私が間違っていることが分かるかもしれません。

index.jsx：./ app.jsx

import React, { PropTypes } from 'react'; 
import ReactDOM from 'react-dom'; 


class Test extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     hello: 'hello world', 
    }; 
    } 

    render() { 
    console.log('WORKS'); // logs fine 

    return (
     <div> 
     <h1>{this.state.hello}</h1> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<Test/>, document.getElementById('react-app')); 

から

import React, { PropTypes } from 'react'; 
import ReactDOM from 'react-dom'; 
import Test from './app'; 


class IndexBody extends React.Component { 

    render() { 
    return (
     <div> 
     <h1>This will show the Test Component</h1> 
     <Test /> 
     </div> 
    ); 
    } 
} 

ReactDOM.render(<IndexBody />, document.getElementById('react-app')) 

そして、私のインポートテストコンポーネント私は、ログを表示することができるよ、しかし、それはdoesnのコンポーネントをレンダリングしません。コンポーネントを間違って作成していますか？ご協力いただきありがとうございます。

Answer 1

app.jsxからTestをエクスポートしないでください。

これは、インポートとして利用できないことを意味します。したがって、undefinedです。

export default Test; 

app.jsxに：あなたが追加する必要があると思い、あなたの現在のコードに基づいて

。

Answer 2

Daveが正しい場合は、App.jsxの下部にあるexport default Test;を実行する必要があります。また、アプリケーション全体で1つのReactDOM.render（）関数だけが必要な場合、index.jsxはすべてがReactDOM.render（）に渡されるコンポーネントツリーを1つのファイル（index.jsx）に読み込みます。

だからあなたの場合にはこれだけにapp.jsx変更し、あなたがビジネスにする必要があります：

import React, { PropTypes } from 'react'; 
import ReactDOM from 'react-dom'; 


class Test extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      hello: 'hello world', 
     }; 
    } 

    render() { 
     console.log('WORKS'); // logs fine 

     return (
      <div> 
       <h1>{this.state.hello}</h1> 
      </div> 
     ); 
    } 
} 

export default Test;