ReactでJSXを使用して文字列をレンダリングする方法

Question

ReactクラスでHTML（JSX）文字列をレンダリングする必要があります。これが可能かどうかわかりません。 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

あなたはあなたのコードに続いて

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

をそれ

npm install --save babel-core 

を変換するためにバベルを使用することができ、それが実行可能なコードに文字列を変換するために、一般的にbad ideaであることに注意してください。