如何在我的React应用中使用oEmbed json响应

Question

我正在尝试将oEmbed响应嵌入到我的React应用程序中。响应如下所示。

​

{
  "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应用程序中使用此响应的正确方式是什么？谢谢。

Answer 1

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

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

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

如果你想渲染附带的超文本标记语言，你可以使用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

Answer 2

通过获取它们的脚本标记并将其放入我的index.html中，然后在dangerouslySetInnerHTML中呈现给定的html，我能够让tiktok正确地嵌入样式。