React.createElement: тип не должен быть пустым, неопределенная .. При создании/рендеринга компонентов

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:

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

И мой импортирован Тест компонент из ./ 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')); 

Я в состоянии отобразить журнал, но он оленья кожа» t хотите отобразить компонент. Я неправильно создаю компоненты? Спасибо за вашу помощь заранее!

Answer 1

Вы не экспортируете Test из app.jsx.

Это означает, что он недоступен в качестве импорта, следовательно undefined.

на основе текущего кода вам нужно добавить:

export default Test; 

к app.jsx.

Answer 2

Dave правильный, вам нужно сделать export default Test; в нижней части App.jsx. Кроме того, вам нужно только одна функция ReactDOM.render() во всем приложении, index.jsx загружает дерево компонентов, все это передается в ReactDOM.render() в одном файле (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;