реагировать на ошибки повторно используемых компонентов (es6)

81
6

постоянно получая эти две ошибки в консоли:

Предупреждение: React.createElement: тип не должен иметь значение null, undefined, boolean или> number. Он должен быть строкой (для элементов DOM) или ReactClass (для составных> компонентов). Проверьте метод рендеринга Embedded.

Uncaught Invariant Violation: Тип элемента недопустим:> ожидаемая строка (для встроенных компонентов) или класс/функция (для составных> компонентов), но получившая: 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'));

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

спросил(а) 2016-05-27T03:37:00+03:00 4 года, 5 месяцев назад
1
Решение
107

Иордания и Феликс помогли мне на правильном пути.

    Я сохранил файлы (Embedded.jsx, Prop.jsx) разделенными. Я удалил последнюю строку из каждого файла ReactDom.render(...) и поместил их в другой файл. Вернувшись к обоим файлам, и по последней строке каждого, я просто export default класс.

Теперь все работает правильно.

ответил(а) 2016-05-27T07:59:00+03:00 4 года, 5 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема