如何替换html中的多个字符串以包装jsx组件中的项

Question

我的博客有WordPress内容，看起来像这样：

<ul>
<li>Bla 1</li>
<li>Bla 2</li>
<li>Bla 3</li>
<li>Bla 4</li>
<li>Bla 5</li>
<li>Bla 6</li>
</ul>

我需要用React打开和关闭组件标签替换CCD_ 1和CCD_；显示更多"；(react show more text node package(按钮后面的几个列表项。

我尝试使用react字符串替换节点包来执行此操作，但是它每行只能执行一个regex操作，并且我不能返回非闭合的JSX组件：第一行正则表达式将<ul>替换为，最后为：

<ShowMoreText>     
<li>Bla 1</li>
<li>Bla 2</li>
<li>Bla 3</li>
<li>Bla 4</li>
<li>Bla 5</li>
<li>Bla 6</li>
</ul>

但是，我不能执行第二个regex，因为我不能返回不完整的JSX代码——我需要包含的结束标记。

有没有办法返回一个不完整的JSX代码，然后在第二次运行regex时完成它？还是我这样做完全错了？如果是，最好的方法是什么？

编辑：WordPress的内容并不总是以<ul>开头，因此最好是解决方案包括一种处理整个博客文章的方法，并用<ShowMoreText>替换<ul>，用</ShowMoreText>替换</ul>

Answer 1

您可以使用html react解析器将html字符串转换为JXS元素。使用<ul>0函数替换其他元素的UL节点，使用domToReact渲染其子元素：

import parse, { domToReact } from "html-react-parser";
const text = `<div><ul>
<li>Bla 1</li>
<li>Bla 2</li>
<li>Bla 3</li>
<li>Bla 4</li>
<li>Bla 5</li>
<li>Bla 6</li>
</ul></div>`;
const render = () => {
return parse(text, {
replace: ({ tagName, children }) => {
if (tagName === "ul") {
return <ShowMoreText>{domToReact(children)}</ShowMoreText>;
}
}
});
};
return (
<div>
<h1>Hello StackBlitz!</h1>
<p>Start editing to see some magic happen :)</p>
{render()}
</div>
);
}

工作示例