在反应中解析混合的 jsx 和 html

Question

我想解析 html 用 tinymce 生成，通过添加 jsx 修改，在反应中。

示例：

import Youtube from "react-youtube"
function Comment() {
  return (
    <div class="comment">
     // I want something that can parse like this
     {parse(`<p>
          <code class="language-javascript">console.log("hi")</code>
          <Youtube videoId="10"/>
          <a href="https://youtu.be/Whosebug">Youtube</a>
         </p>`)}
    </div>
  )
}

我遇到了 react-jsx-parser，它没有按预期工作:(

我也尝试过将 html 字符串转换为 jsx 字符串：

import parse from "html-react-parser";
import ReactElementToJsxString from "react-element-to-jsx-string";
import { parse as parsehtml } from "node-html-parser";
function modifycomment () {
  const comment = ReactElementToJsxString(parse(`<p>
          <code class="language-javascript">console.log("hi")</code>
          <a href="https://youtu.be/Whosebug">Youtube</a>
         </p>`));
 const link = parsehtml(comment).querySelector("a");
 return comment.replace(link.toString(), 
 `<Youtube videoId="${link.getAttribute("href"),replace("https://youtu.be/", "")}"${link.toString()}`);;
}

然后解析：

import Youtube from "react-youtube";
import JsxParser from "react-jsx-parser";
function Comment () {
   return (
     <div class="comment">
       <JsxParser
        components={{ Youtube }}
        jsx={modifycomment()}
       />
     </div>
   )
}

导致渲染错误（比如要删除的子节点不是该节点的子节点）:(

Answer 1

根据 react-youtube 文档，您只需传递视频 ID。但是您的代码有一个额外的 <a> 标记。

comment.replace(link.toString(), 
 `<Youtube videoId="${link.getAttribute("href"),replace("https://youtu.be/", "")}"${link.toString()}`);

并且您没有将此分配给任何东西。我进行了更改并做了一个示例。检查这个 sandbox

顺便拍了一些样片

在反应中解析混合的 jsx 和 html

parse mixed jsx and html in react

javascript

html

reactjs

jsx

html-parsing