使用 html-react-parser 解析 HTML5 <video> 元素

Question

我有一些从 CMS 返回的 HTML 内容，我希望在 NextJS 应用程序中显示它们。我使用

html-react-parser

包而不是

dangerouslySetHtml

来解析 HTML 内容，因为我还希望用相应的 React 组件“Link”和 Cloudinary 的“替换一些嵌入标签，例如“a”、“img”和“video”分别是“CldImage”和“CldVideoPlayer”组件。

“a”和“img”元素替换工作正常，但是我无法弄清楚如何从 domNode 中提取“video”的“src”属性以将其传递给组件。

例如，我的代码类似于以下内容：

import parse, { Element, HTMLReactParserOptions } from "html-react-parser"
import { CldVideoPlayer } from "next-cloudinary"
import "next-cloudinary/dist/cld-video-player.css"

export default function ArticleContent({ content }: { content: string }) {
  const parserOptions: HTMLReactParserOptions = {
    replace: (domNode) => {
      // Replace embedded <video> tags with <CldVideoPlayer>
      if (domNode instanceof Element && domNode.name === "video") {
         return <CldVideoPlayer src={domNode.[ what goes here???? ]} width={1920} height={1080} />
      }
    }
  } 

  return (
    <div>
      {parse(content, parserOptions)}
    </div>
  )

在 domNode 中查找视频 src 属性的路径一直具有挑战性。大家有什么建议吗？

Answer 1

我想通了。我的更换条件应该是这样的：

      if (domNode instanceof Element && domNode.attribs && domNode.name === "source") {
    return <CldVideoPlayer width={1920} height={1080} src={domNode.attribs.src} />
  }