如何替换 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 打开和关闭组件标签替换 <ul> 和 </ul> 以便我可以显示“显示更多”（react-show-more-text 节点包）按钮在几个列表项之后。

我尝试使用 react-string-replace 节点包来做到这一点，但是它每行只能执行一个正则表达式操作，而且我不能 return 一个非封闭的 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>

但是，我不能做第二个正则表达式，因为我不能 return 一个不完整的 JSX 代码 - 我需要为 .

添加一个结束标记

有什么方法可以 return 一个不完整的 JSX 代码，然后在第二个正则表达式运行上完成它？或者我这样做是完全错误的吗？如果是这样 - 最好的方法是什么？

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

Answer 1

您可以使用 html-react-parser 将 html 字符串转换为 JXS 元素。使用 replace 函数替换其他元素的 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>
  );
}

Working example

如何替换 html 中的多个字符串以便将项目包装在 jsx 组件中？

How to replace multiple strings in html in order to wrap items in a jsx component?

javascript

wordpress

reactjs

gatsby