Как визуализировать строку с JSX в React

Question

Мне нужно отобразить строку HTML (JSX) в классе React. Я не знаю, возможно ли это или нет. dangerouslySetInnerHTML недействителен для меня, потому что у меня разные компоненты реакции внутри этого файла. Это не простой HTML.

У меня есть пример с ожидаемым результатом: https://jsfiddle.net/86rg50re/1/

var MyComponent = React.createClass({ 
    propTypes: { 
     owner: React.PropTypes.string 
    }, 

    render: function() { 
     return <div>Congrats {this.props.owner}! you have rendered MyComponent ({this.props.children})</div>; 
    } 
}); 

var Hello = React.createClass({ 
    render: function() { 
     return <div>Header <MyComponent owner={"Daniel"}>Yayyyyyy!</MyComponent></div>; 
    } 
}); 

Но что у меня есть это:

var Hello = React.createClass({ 
    render: function() { 
     var content = '<div>Header <MyComponent owner={"Daniel"}>Yayyyyyy!</MyComponent></div>'; 
     return transformStringToJSX(content); 
    } 

Очевидно transformStringToJSX не существует.

Есть ли способ визуализации строк jsx?

Answer 1

Вы можете использовать столпотворение, чтобы превратить его

npm install --save babel-core 

Тогда в вашем коде

var babel = require('babel-core'); 
var Component = eval(babel.transform('<div><MyComponent /></div>').code); 

Пожалуйста, обратите внимание, что это вообще bad idea для преобразования строки в исполняемый код.