ReactJs-映射包含html标记的数据

我有包含html标记的数据，如下所示：

{
  "data" : 
   [
      {"id": 1, "content": "I am <b>important content!</b>"}
   ]
}

{
“数据”：
[
{“id”：1，“内容”：“我是重要的内容！”
]
}

绘制用于渲染的数据时

data.map(function(item, index){
  <div key={ index }>{ item.content }</div>
}

data.map（函数（项、索引）{
{item.content}
}

它产生以下视觉输出：

我是重要的内容！

我真正想要的是

我是重要的内容！

---

当我遍历包含HTML标记的数据映射时，如何确保标记被正确解释，而不是逐字解释

非常感谢

更新：

阿什提出了一个解决方案，它起了作用，我感谢他，但它让我陷入了另一个难题。这很有效

  <div dangerouslySetInnerHTML={{__html: data.content}} />

---

因为我不知道用户是否会在他/她提供的内容中包含标记，这是否意味着这是最干净的方法？在准备呈现用户提供的内容时，我必须在映射到的每个变量中包含此代码段？

类似于：如果要呈现字符串，这就是您的方式。如果它来自一个用户，是的，您需要用户

危险的html

来通过组件呈现html，并且在这样做之前，您确实应该通过html消毒剂（）来运行内容。

  <div dangerouslySetInnerHTML={{__html: data.content}} />