我正试图在我的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应用程序中使用此响应的正确方法是什么？非常感谢。
目前还不太清楚您希望以何种方式嵌入响应。
如果您的意思是在页面上显示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
通过获取他们的脚本标记并将其放入我的index.html中，然后在dangerouslySetInnerHTML中呈现给定的html，我能够使tiktok与样式正确嵌入。