Как вернуть существующий элемент реакции из рендера

Question

Из описания ошибки я понимаю, что рендер может возвращать классы и строки, но не уже созданный объект. Однако есть ли обходной путь?

const Hello = React.createElement("div",{},"Hello"); 

var MyComp = React.createClass({ 
render:function(){ 
return(<Hello/>) 
} 
}) 

ОШИБКА в ответ: Тип элемента недействителен: ожидается строка (для встроенных компонентов) или класса/функции (для составных компонентов), но получил: объект

Answer 1

Для устранения этой проблемы что вам нужно создать div внутри компонента Reacts, и только тогда вы сможете его визуализировать.

Мы передаем некоторые методы в объекте JavaScript для React.createClass() для создания нового компонента React. Наиболее важным из этих методов называется render, который возвращает дерево компонентов React, которое в конечном итоге будет отображаться в HTML.

DOC

var Hello = React.createClass({ 
 
    render: function() { 
 
    return (
 
     React.createElement('div', {}, 
 
     "Hello, world! " 
 
    ) 
 
    ); 
 
    } 
 
}); 
 

 
var MyComp = React.createClass({ 
 
render:function(){ 
 
return(<Hello />) 
 
} 
 
}) 
 

 
ReactDOM.render(<MyComp />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.js"></script> 
 

 
<div id="app"></div>