如何使用 Javascript React 打印包含 html 的对象值答案

【问题标题】：How to print an objects value that contains html with Javascript React如何使用 Javascript React 打印包含 html 的对象值
【发布时间】：2017-08-29 15:08:42
【问题描述】：

所以目前我将此作为道具的对象

{
    id: "1",
    summary: "HTML content inside this string",
    name: "John"
}

所以我试图做的是删除字符串，以便它将 html 打印为 html 而不是字符串，但我使用 JSON.parse() 得到的错误是这个 SyntaxError: Unexpected token o in JSON at position 1

HTML 内容是一个非常简单的 Ul，带有 Li 的列表。

我怎样才能呈现一个包含 HTML 的对象值，以便它打印为 HTML。

任何帮助都会很棒。

谢谢

【问题讨论】：

您收到的 SynataxError 很可能意味着您将对象传递给 JSON.parse() 而不是 JSON 文本，请检查您正在使用的变量 (console.log)
删除引号会使字符串无效。而是使用字符串/文本来创建所需的 html 元素，请参阅 stackoverflow.com/questions/2522422/…

标签： javascript html json string reactjs

【解决方案1】：

删除引号会使字符串无效。而是使用字符串/文本来创建所需的 html 元素。

查看以下示例。

var props = {
  id: "1",
  summary: "<div><ul><li>Some text here</li></ul></div>",
  name: "John"
}

var htmlObject = document.createElement('div');
htmlObject.innerHTML = props.summary;
document.getElementById("t").appendChild(htmlObject);

<div id="t">
</div>

【讨论】：

【解决方案2】：

想通了，感谢您的所有帮助。

为了让它通过 react 渲染，我所做的是为要修改的输出创建一个函数

summary() {
    return {__html: modal.summary
}

然后我使用了 dangerouslySetInnerHTML 并且它起作用了

<div id="summary" dangerouslySetInnerHTML={summary()} />

【讨论】：