反应可重用组件错误(es6)

时间:2016-05-27 00:37:31

标签: javascript reactjs

在控制台中经常出现这两个错误:

  

警告:React.createElement:type不应为null,undefined,boolean或> number。它应该是一个字符串(对于DOM元素)或一个ReactClass(对于复合>组件)。检查Embedded的呈现方法。

     

未捕获的不变违规:元素类型无效:>期望字符串(对于内置组件)或类/函数(对于复合>组件)但得到:object。检查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'));
&#13;
&#13;
&#13;

&#13;
&#13;
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'));
&#13;
&#13;
&#13;

编辑:

我基本上删除了我之前提供的每个代码段底部的行,并创建了另一个文件,但我仍然遇到相同的错误。

我不想将所有课程都放在同一个档案中,因为我希望它们能够分开,并且在我需要再次查找时更容易找到。

&#13;
&#13;
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'));
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

乔丹和菲利克斯帮助我走上正轨。

  • 我保存了我的文件(Embedded.jsx,Prop.jsx)。
  • 我从每个文件ReactDom.render(...)中删除了最后一行,并将它们放入另一个文件中。
  • 回到两个文件,在每个文件的最后一行,我只是export default班级。

现在一切正常。