如何处理来自 reactjs 中的服务器调用的 JSX？ [复制]答案

【问题标题】：How to handle JSX come from server call in reactjs? [duplicate]如何处理来自 reactjs 中的服务器调用的 JSX？ [复制]
【发布时间】：2018-12-23 14:52:03
【问题描述】：

我正在渲染来自 API 调用的 JSX。 API 调用返回 10 个对象数组的 JSON，我使用 this.setState({Posts: JSON.Array}) 设置此数组，然后执行以下操作：

render(){
return(<div>
{this.state.Posts.map(post=>(<div> <span>2018-07-10</span>
<h2>{post.title.rendered}</h2> 
<p>{post.excerpt.rendered}</p></div>))}
</div>);
}

现在我的 JSON 如下所示： Array:[ {title: {rendered: "this is title(type is string)" }, 摘录: {rendered: "here is my JSX(type is JSX)" } }, { }, { },. ..]

一切正常，但这里的标题很容易呈现，因为它是一个字符串，但摘录（JSX 的类型）呈现为一个字符串而不是 JSX，输出看起来像：

那么我该如何修复它，我想将摘录呈现为 JSX，而不是作为字符串我阅读了一些文档，他们说将 JSX 放在一个数组中，即。 {[post.excerpt.rendered]} 但这不起作用。

【问题讨论】：

你尝试过危险的SetInnerHTML 吗？ reactjs.org/docs/dom-elements.html

标签： reactjs jsx

【解决方案1】：

你可以试试dangerouslySetInnerHTML摘录

<p dangerouslySetInnerHTML={__html: post.excerpt.rendered }></p>;

【讨论】：