web-dev-qa-db-ja.com

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

ReactクラスでHTML（JSX）文字列をレンダリングする必要があります。これが可能かどうかはわかりません。dangerouslySetInnerHTMLこのファイル内にさまざまなreactコンポーネントがあるため、私には無効です。プレーン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文字列をレンダリングする方法はありますか？

htmlreactjsreact-jsx
10
gyss

あなたはそれを変換するためにbabelを使用することができます

npm install --save babel-core

次に、コードで

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

文字列を実行可能コードに変換するのは一般的に 悪い考え であることに注意してください。

10
hampusohlsson