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

Question

我正在尝试在我的 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 不起作用。我不想在响应中更改任何内容，因为用户将提供 link 所以会有很多不同的响应，我不只是这样做一次。

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

Answer 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

Answer 2

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

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

How to use an oEmbed json response in my React App

reactjs

oembed