Javascript 如何在React中呈现从RSS提要请求返回的整个HTML字符串？

我有一个应用程序，它在后端（RubyonRails）获取RSS/Atom提要，并将提要作为JSON发送到前端。已解析的提要（在后端使用SimpleRS或Feedjira等库获得）是一个对象，其键为title、summary、content等，值为关联字符串

我将解析后的提要作为JSON发送到前端。然后我想在React组件中呈现提要的“内容”。提要的内容是一大串HTML

我尝试使用JQuery将字符串转换为HTML元素的对象，然后将其转换为数组，然后呈现数组：

var FeedItem = react.createClass({
  render: function() {
    var content = $(this.props.feed.content);
    content = Object.keys(content).map(function(key) {
      return content[key];
    });
    return (
      <div>
        {content}
      </div>
    )
  }
})

如何将整个页面的一大串HTML呈现为react组件

下面是一个从Google Analytics博客获得的内容字符串示例（下面是从博客获得的单个提要的内容）

“在谷歌几岁的时候，我们写了一份用户列表。该列表包括“关注用户，其他一切都会跟进”以及“快总比慢好”很难说大部分移动网络都遵守了这些原则。用户经常会对糟糕的体验感到沮丧，网站加载缓慢，或者会在加载资源时锁定，从而阻塞他们的数据连接。
（AMP）是一项开源计划，旨在通过使内容能够即时加载来解决这些问题，并为所有人提供更好的web体验。AMP引入了一种新的HTML格式。它的构建旨在优先考虑速度和出色的用户体验。AMP提供可靠的良好页面加载性能的一种方法是通过res限制了向页面添加自定义JavaScript的能力，而不是依赖内置的可重用组件。
今天，AMP团队将在AMP页面上实现测量。谷歌分析团队致力于帮助我们的用户在任何地方测量他们的内容。因此，对于希望使用AMP的发布者来说，提供更好的用户体验经验证明，我们已经发布了用于加速移动页面的Google Analytics测量功能。Google Analytics中的AMP支持可以轻松识别您的最佳内容并优化您的用户体验。
Google Analytics support如何工作
AMP上的分析由一个开源、可重用的组件处理，Google Analyticsam帮助构建。amp analytics组件可以配置Google analytics特定的配置参数，以记录页面视图、事件，甚至自定义维度。该配置与全局事件侦听器协同工作，自动检测按钮按下等触发器。因此，无需分散自定义参数在整个页面中使用JavaScript来检测应该触发事件和命中的操作。相反，您可以在配置部分中定义应该触发命中的操作，并让AMP的魔力完成其余操作。
如何开始
在开始使用AMP分析之前，您需要先从AMP本身开始。包含。一旦你有了一个AMP页面，是时候开始考虑你想如何衡量它的性能了。
我们建议你使用一个单独的Google Analytics属性来衡量你的AMP页面。AMP是一项新技术，随着时间的推移将逐渐成熟。因此，你在web分析中使用的一些功能将不再适用立即在AMP analytics中可用。AMP页面可以在多个上下文中显示，包括通过不同的联合缓存。因此，访问页面的AMP版本和页面的HTML版本的单个用户最终可能会被视为两个不同的用户。使用单独的Google analytics属性来测量AMP页面使处理这些问题变得更容易。
一旦您设置了AMP页面和新的Google Analytics属性，您将需要参考。
下一步是什么
包括Google Search、Twitter、Pinterest和LinkedIn在内的多个技术合作伙伴已宣布，他们将在未来几年内开始呈现AMP页面月。Google Analytics团队很高兴从第一天起就支持AMP，并期待随着AMP功能的扩展，我们的产品不断增加。

由产品经理Dan Cary和软件工程师Avi Mehta发布\n\n“

您可以使用，但我们知道风险（可能的跨站点脚本（XSS）攻击）。您只需将返回语句更改为：

return <div dangerouslySetInnerHTML={{ __html: content }}></div>

返回

添加了内容字符串示例的可能重复项。您可能需要查看。可以大大简化这个问题

"<div dir=\"ltr\" style=\"text-align: left;\" trbidi=\"on\"><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\">When Google was a few years old, we wrote up a list of <a href=\"https://www.google.com/about/company/philosophy/\"><span style=\"-webkit-text-stroke-color: rgb(18, 85, 204); color: #1255cc;\">Ten things we know to be true</span></a>. The list includes items like “Focus on the user and all else will follow” as well as “Fast is better than slow.” It would be tough to say that much of the mobile web has adhered to these principles. Users often get frustrated by poor experiences in which sites load slowly or will lock up trying to load resources that clog their data connections.</div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\"><span style=\"-webkit-text-stroke-color: rgb(18, 85, 204); color: #1255cc; text-decoration: underline;\"><a href=\"https://www.ampproject.org/\">The Accelerated Mobile Pages Project</a></span> (AMP) is an open source initiative that aims to address these problems by enabling content to load instantaneously and provide a better web experience for all. AMP introduces a new format that is a flavor of HTML. It’s built to prioritize speed and a fantastic user experience. One way that AMP provides reliably good page loading performance is by restricting the ability to add custom JavaScript to pages and instead relying on built in, reusable components.</div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\">Today, the AMP team <a href=\"https://amphtml.wordpress.com/2016/01/28/analytics-and-measurement-for-amp-pages\"><span style=\"-webkit-text-stroke-color: rgb(18, 85, 204); color: #1255cc;\">announced the launch of an analytics component</span></a> that will enable measurement on AMP pages. The Google Analytics team is committed to helping our users measure their content wherever it appears. So, for publishers looking to use AMP to provide an improved user experience, we’ve released Google Analytics measurement capabilities for Accelerated Mobile Pages. AMP support in Google Analytics makes it easy to identify your best content and optimize your user experience.</div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\"><b>How Google Analytics Support Works</b></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\">Analytics on AMP is handled by an open source, reusable component that the Google Analytics team helped build. The &lt;amp-analytics&gt; component can be configured with Google Analytics specific configuration parameters to record pageviews, events, and even custom dimensions. That configuration works hand in hand with a global event listener that automatically detects triggers like button presses. As a result, there’s no need to scatter custom JavaScript throughout your page to detect actions that should trigger events and hits. Instead, you can define which actions should trigger hits within the configuration section and let the magic of AMP do the rest.</div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\"><b>How to Get Started</b></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\">Before you get started with AMP Analytics, you’ll need to get started with AMP itself. The <a href=\"http://ampproject.org/\"><span style=\"-webkit-text-stroke-color: rgb(18, 85, 204); color: #1255cc;\">AMP website</span></a> contains <a href=\"https://www.ampproject.org/docs/get_started/create_page.html\"><span style=\"-webkit-text-stroke-color: rgb(18, 85, 204); color: #1255cc;\">a great introduction to getting started</span></a>. Once you have an AMP page up, it’s time to start thinking about how you’d like to measure its performance.&nbsp;</div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\">We recommend that you use a separate Google Analytics property to measure your AMP pages. AMP is a new technology that’s going to mature over time. As such, some of the functionality that you’re used to in web analytics won’t immediately be available in AMP analytics right away. AMP pages can appear in multiple contexts, including through different syndication caches. Because of that, a single user that visits an AMP version of a page and a HTML version of a page can end up being treated as two distinct users. Using a separate Google Analytics property to measure AMP pages makes it easier to handle these issues.</div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\">Once you have your AMP page and new Google Analytics property set up, you’ll want to reference <a href=\"https://support.google.com/analytics/answer/6343176\"><span style=\"-webkit-text-stroke-color: rgb(18, 85, 204); color: #1255cc;\">the requirements for using Analytics on AMP pages</span></a> as well as the <a href=\"https://developers.google.com/analytics/devguides/collection/amp-analytics/\"><span style=\"-webkit-text-stroke-color: rgb(18, 85, 204); color: #1255cc;\">developers guide for instrumenting measurement</span></a>.</div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\"><b>What’s Next</b></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\">Multiple technology partners, including Google Search, Twitter, Pinterest, and LinkedIn have announced that they’ll start surfacing AMP pages in the coming months. The Google Analytics team is excited to support AMP from day one and look forward to growing our offering as AMP’s capabilities expand.</div><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal; min-height: 14px;\"><br /></div><br /><div style=\"-webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial; font-family: Arial; font-size: 12px; line-height: normal;\"><i>Posted by Dan Cary, Product Manager and Avi Mehta, Software Engineer</i></div></div><div class=\"feedflare\">\n<a href=\"http://feeds.feedburner.com/~ff/blogspot/tRaA?a=LxtIVDKQw_w:GPFyrUXb_LI:yIl2AUoC8zA\"><img src=\"http://feeds.feedburner.com/~ff/blogspot/tRaA?d=yIl2AUoC8zA\" border=\"0\"></img></a> <a href=\"http://feeds.feedburner.com/~ff/blogspot/tRaA?a=LxtIVDKQw_w:GPFyrUXb_LI:-BTjWOF_DHI\"><img src=\"http://feeds.feedburner.com/~ff/blogspot/tRaA?i=LxtIVDKQw_w:GPFyrUXb_LI:-BTjWOF_DHI\" border=\"0\"></img></a>\n</div><img src=\"http://feeds.feedburner.com/~r/blogspot/tRaA/~4/LxtIVDKQw_w\" height=\"1\" width=\"1\" alt=\"\"/>"

return <div dangerouslySetInnerHTML={{ __html: content }}></div>