如何在React中使用JSX呈现字符串

我需要在React类中呈现HTML（JSX）字符串。 我不知道这是否可行。 危险的SetInnerHTML对我来说是无效的，因为我在这个文件中有不同的反应组件。 这不是纯粹的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字符串？

---

你可以用babel来转换它

npm install --save babel-core

然后在你的代码中

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

请注意，将字符串转换为可执行代码通常不是个好主意。

链接地址: http://www.djcxy.com/p/52093.html

上一篇: How to render a string with JSX in React

下一篇: Selectively rendering optional component properties in React JSX