React - 如何以 JSON 格式返回 HTML 元素

Posted 2023-02-22

【中文标题】React - 如何以 JSON 格式返回 HTML 元素

【英文标题】：React - How to return HTML elements in JSON

【发布时间】：2016-05-05 09:30:49

【问题描述】：

我有一个 JSON 文件，其中包含字符串中的 html 元素 - 是否可以将 React/JSX 中的数据作为有效呈现的 HTML 返回？

var Hello = React.createClass(
  render: function() 
    var exampleJSONData = 
        "item": "Hello",
        "text": "<p>Lorem ipsum</p><p>dolor sit amet</p>"
    
    return <div>data.item data.text</div>;
  
);

返回：Hello <p>Lorem ipsum</p><p>dolor sit amet</p> 而不是：

Hello
Lorem ipsum
dolor sit amet

fiddle

【参考方案1】：

你可以尝试像这样使用dangerouslySetInnerHTML

<div dangerouslySetInnerHTML= __html: data.text  />

Example

【讨论】：

谢谢，我忘记了这个危险的SetInnerHTML