如何在我的 React 应用程序中使用 oEmbed json 响应答案

【问题标题】：How to use an oEmbed json response in my React App如何在我的 React 应用程序中使用 oEmbed json 响应
【发布时间】：2020-05-07 14:19:00
【问题描述】：

我正在尝试在我的 React 应用程序中嵌入 oEmbed 响应。响应看起来像这样。

{
  "version": "1.0",
  "type": "video",
  "title": "Scramble up ur name & I’ll try to guess it????❤️ #foryoupage #petsoftiktok #aesthetic",
  "author_url": "https://www.tiktok.com/@scout2015",
  "author_name": "Scout & Suki",
  "width": "100%",
  "height": "100%",
  "html": "<blockquote class=\"tiktok-embed\" cite=\"https://www.tiktok.com/@scout2015/video/6718335390845095173\" data-video-id=\"6718335390845095173\" style=\"max-width: 605px;min-width: 325px;\" > <section> <a target=\"_blank\" title=\"@scout2015\" href=\"https://www.tiktok.com/@scout2015\">@scout2015</a> <p>Scramble up ur name & I’ll try to guess it????❤️ <a title=\"foryoupage\" target=\"_blank\" href=\"https://www.tiktok.com/tag/foryoupage\">#foryoupage</a> <a title=\"petsoftiktok\" target=\"_blank\" href=\"https://www.tiktok.com/tag/petsoftiktok\">#petsoftiktok</a> <a title=\"aesthetic\" target=\"_blank\" href=\"https://www.tiktok.com/tag/aesthetic\">#aesthetic</a></p> <a target=\"_blank\" title=\"♬ original sound - ????????????????????????????\" href=\"https://www.tiktok.com/music/original-sound-6689804660171082501\">♬ original sound - ????????????????????????????</a> </section> </blockquote> <script async src=\"https://www.tiktok.com/embed.js\"></script>",
  "thumbnail_width": 720,
  "thumbnail_height": 1280,
  "thumbnail_url": "https://p16.muscdn.com/obj/tos-maliva-p-0068/06kv6rfcesljdjr45ukb0000d844090v0200010605",
  "provider_url": "https://www.tiktok.com",
  "provider_name": "TikTok"
}

我想在我的 react 应用中简单地呈现它。使用 html 不起作用。我不想更改响应中的任何内容，因为用户将提供一个链接，因此会有许多不同的响应，我不只是这样做一次。

那么在我的 React 应用程序中使用此响应的正确方法是什么？谢谢。

【问题讨论】：

标签： reactjs oembed

【解决方案1】：

目前还不清楚您希望以何种方式嵌入响应。

如果您的意思是在页面上显示 JSON：

<div><pre>{JSON.stringify(response, null, 2)}</pre></div>

如果你想渲染封闭的 HTML，你可以使用dangerouslySetInnerHTML：

function createMarkup(html) {
  return {__html: html};
}

function MyComponent() {
  // where response = <your response json>
  return <div dangerouslySetInnerHTML={createMarkup(response.html)} />;
}

在此处阅读更多信息：https://reactjs.org/docs/dom-elements.html

【讨论】：

希望这个 html 带有 script 标签中提供的样式。我可以通过获取该脚本标记并将其放入我的 index.html 来解决此问题。我会把那个响应html放到dangerouslySetInnerHTML中，谢谢你的帮助！

【解决方案2】：

通过获取他们的脚本标签并将其放入我的 index.html，然后在危险的SetInnerHTML 中渲染给定的 html，我能够让 tiktok 正确嵌入样式。

【讨论】：