Как визуализировать строку с помощью JSX в React

Мне нужно отобразить строку 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?

Ответы

Ответ 1

Вы можете использовать babel для его преобразования

npm install --save babel-core

Затем в вашем коде

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

Обратите внимание, что обычно это плохая идея для преобразования строк в исполняемый код.