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

Question

我有一個文本文件，我想使用Regex將其轉換爲JSX字符串，並在瀏覽器上顯示，就好像它是在render（）塊中手動輸入的JSX標記一樣。

比方說，我創建一個字符串

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

，並希望有它由

顯示在瀏覽器

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

瀏覽器顯示

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

爲文本字符串，而不是「測試字符串」的樣式適用於它的樣式。

Answer 1

您可以使用div標籤上的dangerouslySetInnerHTML屬性來隨意渲染HTML。這仍不過只是顯示爲HTML而不是作爲一個JSX標籤，就像這樣：

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

如果你無論如何生成自己的JSX字符串，那麼爲什麼不選擇創建呈現這些屬性，就像在一個類以下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); 
    } 
});