以编程方式生成的 JSX 字符串

Question

我有一个文本文件，我想使用 Regex 将其转换为 JSX 字符串并显示在浏览器上，就好像它是在渲染 return () 块中手动输入的 JSX 标记一样。

假设我创建了一个字符串

generatedString = '<span class="tag" style={divStyle}>Test string</span>'

并希望通过

将其显示在浏览器中

render() {
  <div> {generatedString} <div>
}

浏览器显示

"<span_class="tag"_style={divStyle}>Test string</span>"

作为文本字符串，而不是应用了样式的 "Test string"。

Answer 1

您可以使用 div 标签上的 dangerouslySetInnerHTML 属性来呈现 HTML 随心所欲。然而，这仍然只是显示为 HTML 而不是 jsx 标记，如下所示：

render() {
    return <div dangerouslySetInnerHTML={generatedString} />;
}

如果你自己生成 JSX 字符串，那么为什么不选择创建一个 class 来呈现这些属性，就像下面的 fiddle

var GeneratedComponent = React.createClass({
    propTypes: {
        content: React.PropTypes.object
    },
    render() {
        var content = this.props.content;
        if (!content || !content.tag) {
            return null;
        }
        return React.createElement(content.tag, content);
    }
});

以编程方式生成的 JSX 字符串

Programmatically generated JSX string

reactjs

react-jsx