Come eseguire il rendering di una stringa con JSX in React

Question

Ho bisogno di eseguire il rendering di una stringa HTML (JSX) in una classe React. Non so se sia possibile o meno. dangerouslySetInnerHTML non è valido per me perché ho diversi componenti di reazione all'interno di questo file. Non è un semplice HTML.

Ho un esempio con il risultato atteso: 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>; 
    } 
}); 

ma quello che ho è questo:

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

Ovviamente transformStringToJSX non esiste.

C'è un modo per eseguire il rendering delle stringhe jsx?

Answer 1

È possibile utilizzare babel per trasformarla

npm install --save babel-core 

Poi nel codice

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

Si prega di notare che è generalmente un bad idea per convertire le stringhe di codice eseguibile.