Как использовать ответ oEmbed json в моем приложении React - PullRequest
Новая
       56

Как использовать ответ oEmbed json в моем приложении React

0 голосов
/ 07 мая 2020

Я пытаюсь встроить ответ 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"
}

Я хотел бы просто отобразить это в моем приложении для реагирования. Использование html не работает. Я не хочу ничего менять в ответе, так как пользователь предоставит ссылку, поэтому будет много разных ответов, я не делаю это только один раз.

Итак, как правильно использовать этот ответ в моем приложении React? Спасибо.

Ответы [ 2 ]

1 голос
/ 07 мая 2020

Не очень понятно, каким образом вы sh вставляете ответ.

, если вы имеете в виду отображать JSON на странице: 

{JSON.stringify(response, null, 2)}

если вы имели в виду рендеринг заключенного 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

0 голосов
/ 07 мая 2020
• 1000
...