如何自动插入一个html标签到一个react组件?

我正在从我的后端(由CKEditor生成)获取HTML，然后我使用DangerouslySetInnerHTML来渲染这样的HTML:

const parsed = DOMPurify.sanitize(album.description)
<div dangerouslySetInnerHTML ={{ __html: parsed }} className={styles.albumDescription} </div>

它工作得很好，我可以渲染我的HTML。然而，我有嵌入媒体的麻烦。CK编辑器返回<oembed />标记中的媒体链接。

我想做的是每次有<oembed />时，将它们插入<ReactPLayer />组件。

我知道我可能会使用香草js DOM操作，并使用类似getElementsByTagName的东西，但我认为这不是很好的做法，在反应。

使用DOM操作的挑战将是逐字替换<oembed .... />将具有的所有属性，尽管这并非不可能。

如果传入的html字符串不是很大(以几mb为单位运行)，一个简单的字符串正则表达式操作应该可以做到:

选项1:如果你确定它总是<oembed…>，则下列工作。

const desc = album.description;
oembed_2_player = desc.replaceAll(/<oembed ([^/]*)/>/gi,"<ReactPLayer $1 />"); 
const parsed = DOMPurify.sanitize(oembed_2_player)
<div dangerouslySetInnerHTML ={{ __html: parsed }} className={styles.albumDescription} </div>

选项2:如果你希望

相关内容

最新更新

热门标签：