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

Question

constantly getting these two errors in console:

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 Embedded .

Uncaught Invariant Violation: Element type is invalid: >expected a string (for built-in components) or a class/function (for composite >components) but got: object. Check the render method of Embedded .

what i'm trying to do is have my Embedded class contain many Prop classes within it.

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

EDIT:

i've essentially removed the lines at the bottom of each snippet i provided earlier and created another file to put there instead but I am still getting the same errors.

i don't want to put all my classes in the same file because i would like them separate and easier to find when I need to look for them again.

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

Answer 1

Jordan and Felix helped me on to the right track.

• I kept my files (Embedded.jsx, Prop.jsx) separated.
• I removed the last line from each file ReactDom.render(...) and put them into another file.
• Went back to both files and on the last line of each, I just export default the class.

Now everything is working properly.