使用字符串对象映射数组并渲染 HTML 标签

Question

我正在创建一个简单的 React 应用程序，我必须通过这样的数组来 map：

const data = [
   {
    id: 1,
    string: "my dog is a <strong>poodle</strong>"
},
{id: 2,
 string: "my cat is nice"

}

]

有时在字符串内部，我有一些强大的标签要渲染。 当我尝试渲染那句话时，我会看到 html 渲染。 如果我尝试使用模板文字并将该强标记分配给变量，则会出现 [object object] 错误。 在这种情况下如何渲染标签？ 尽可能避免使用“setDangerouslyHTML”道具。 这是我的映射 function：

data.map(da=>{

  return (<li key={da.id}>{da.string}/>)
}

Thanks for the help!

Answer 1

您没有正确关闭标签

data.map(da=>(<li key={da.id}>{da.string}</li>))

编辑如果你想在字符串中显示标签，你可以这样做

data.map(da=>(<li key={da.id} dangerouslySetInnerHTML={{ __html: da.string }}></li>))

这是一个工作示例