Question

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

警告：React.createElement：type不应为null，undefined，boolean或＆gt; number。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合＆gt;组件）。检查Embedded的呈现方法。

未捕获的不变违规：元素类型无效：＆gt;期望字符串（对于内置组件）或类/函数（对于复合＆gt;组件）但得到：object。检查Embedded的呈现方法。

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

＆＃13;

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;

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;

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;

Answer 1

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

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

现在一切正常。

反应可重用组件错误（es6）

1 个答案: