如何将 HTML + 标记字符串作为道具提供给 ReactJS 组件？答案

【问题标题】：How to serve a HTML + markup string to ReactJS component as a prop?如何将 HTML + 标记字符串作为道具提供给 ReactJS 组件？
【发布时间】：2021-09-14 20:57:45
【问题描述】：

我正在构建一个简单的幻灯片 Web 应用程序，它使用 JSON 对象作为模拟数据库，并通过 ReactJS 组件呈现 UI。

有没有办法将 JSON 对象中的 HTML + 标记作为字符串存储，将字符串传递给 ReactJS，然后让 ReactJS 在 React 组件中渲染 HTML 元素/标记？

以下是 JSON 对象的示例：

{
  "slides": {
    "1":{
      "title":"Introductory Finance",
        "content":"<p>By Raymond Arthur</p>"
        }
  }
}

这是 React 组件：

class Body extends React.Component{
  constructor(props){
    super(props);
  }

  render(){
    return(
      <div className='body'>
         {this.props.content}    
      </div>
    );
  }
}

目前，如果我将 slides[1].title.content 作为道具传递给带有 <div> 的 React 组件，By Raymond Arthur 将在屏幕上呈现为文本（即 React 实际上并没有创建带有文本的  元素在他们里面）。就好像 React 将 By Raymond Arthur 转义为文本字符串，而不是识别 HTML 标记/元素。

我该如何解决这个问题？如何将 HTML + 标记作为字符串存储在 JSON 对象或数据库中，将 HTML + 标记字符串提供给 ReactJS，然后让 ReactJS 识别它是 HTML 而不仅仅是字符串？

我看到其他 SF 线程引用 dangerouslySetInnerHTML - 这是唯一的选择吗？

还是 ReactDOMServer？

【问题讨论】：

如果你想避免危险的SetInnerHTML，你可以使用包react-html-parser
谢谢，我去看看包裹，

标签： javascript html json reactjs

【解决方案1】：

要解决这个问题，您可以使用 dangerouslySetInnerHTML 属性类似这样。它将作为对象属性的标记包装到下面指定的 div 标签中。

&lt;div dangerouslySetInnerHTML={{__html:this.props.content}}&gt;&lt;/div&gt;

【讨论】：