javascript - 如何在 React js 中加载 API 数据视频 url

Question

我已经安装了 dompurify react js 库并从 API 加载了所有竞争，但 API youtube URL 视频无法加载，但可以在 API 中看到。

接口：

{
    "id": 5,
    "name": "shahiraja",
    "title": "text below as a natural lead-in to additional content. This content is a little bit l text below as a natural lead-in to ad",
    "image": "/media/resources/Screenshot_from_2021-09-14_19-13-25.png",
    "created_at": "2022-01-03T08:07:44.451476Z",
    "body": "<p><iframe frameborder=\"0\" src=\"//www.youtube.com/embed/LNkdmyHp5Co\" width=\"640\" height=\"360\" class=\"note-video-clip\"></iframe><a href=\"https://www.youtube.com/watch?v=LNkdmyHp5Co\"></a><br></p>",
    "category": 1
}

代码：

<div
    class="col-md-10"
    dangerouslySetInnerHTML={{ __html: sanitize(body.body) }}
></div>

Answer 1

开箱即用，看起来sanitize有点太固执己见，iframe被剥离了。您可以传递配置并允许iframe标记。

<div
  className="col-md-10"
  dangerouslySetInnerHTML={{
    __html: sanitize(body.body, { ADD_TAGS: ["iframe"] })
  }}
/>

Answer 2

如果您从 API 获取数据作为 HTML 代码，那么最好使用

危险地设置InnerHTML

否则，如果您获得文件的 URL，则只需使用视频标签。

<video
    autoPlay
    playsInline
    muted
    src={src}
    onLoadedData={onLoadedData}
    style={{ opacity: isVideoLoaded ? 1 : 0 }}
  />