javascript - react 可重用组件错误(ES6)

不断在控制台中出现以下两个错误：


  警告：React.createElement：type不能为null，undefined，boolean或> number。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合>组件）。检查Embedded的渲染方法。
  
  未捕获的不变违反：元素类型无效：>预期为字符串（对于内置组件）或类/函数（对于复合>组件），但得到了：对象。检查Embedded的渲染方法。


我想做的是让我的Embedded类中包含许多Prop类。

import React from 'react';
import ReactDOM from 'react-dom';

class Prop extends React.Component {
	constructor () {
		super();
	}

    render() {
    	console.log(this);
        return <span> I am a { this.props.position } </span>
    }
}

ReactDOM.render(<Prop position="developer"/>, document.getElementById('prop-passed'));

import React from 'react';
import ReactDOM from 'react-dom';
import Prop from './prop.jsx';


class Embedded extends React.Component {

  constructor() {
    super();
  }

  render() {
    let lines = this.props.sentences.map((item) => {
      return <li key={ Math.random(1, 5) }><Prop position={ item.position }/></li>
    });

    return (
      <div>
      { lines }
      </div>
    );

  }
}

ReactDOM.render(<Embedded sentences={[ { id: 1, position: 'dog' }, { id: 2, position: 'cat' }, { id: 3, position: 'bear' }]}/>, document.getElementById('embedded'));

编辑：

实际上，我已经删除了我之前提供的每个代码片段底部的行，并创建了另一个文件放置在那里，但是我仍然遇到相同的错误。

我不想将所有类放在同一文件中，因为我希望它们分开并在需要再次查找时更容易找到。

import React from 'react';
import ReactDOM from 'react-dom';
import Simple from './simple.jsx';
import Prop from './prop.jsx';
import Embedded from './embedded.jsx';

ReactDOM.render(<Simple/>, document.getElementById('simple'));
ReactDOM.render(<Prop position="developer"/>, document.getElementById('prop-passed'));
ReactDOM.render(<Embedded sentences={[ { id: 1, position: 'dog' }, { id: 2, position: 'cat' }, { id: 3, position: 'bear' }]}/>, document.getElementById('embedded'));

最佳答案

乔丹（Jordan）和费利克斯（Felix）帮助我走上了正确的道路。


我将文件（Embedded.jsx，Prop.jsx）分开。
我从每个文件ReactDom.render(...)中删除​​了最后一行，并将它们放入另一个文件中。
回到两个文件，在每个文件的最后一行，我只是export default该类。


现在一切正常。