Question

我想通过用React组件（例如<p>和<a>）替换特定标签（例如<StyledParagraph>和<StyledLink>）来渲染大量的html

我已经测试了许多库，包括html-react-parser。与许多其他方法不同，html-react-parser的示例可以满足我的需求。但是，我无法使该示例起作用。（使用React 16.5.3）

const test = () =>
  <>
    {parse(
      `
      <p id="main">
        <span class="prettify">
          keep me and make me pretty!
        </span>
      </p>
    `,
      {
        replace: ({ attribs, children }) => {
          if (!attribs) return;

          if (attribs.id === 'main') {
            return (
              <h1 style={{ fontSize: 42 }}>
                {domToReact(children)}
              </h1>
            );
          } else if (attribs.class === 'prettify') {
            return (
              <span style={{ color: 'hotpink' }}>
                {domToReact(children)}
              </span>
            );
          }
        }
      }
    )}
  </>

我没有将parserOptions传递给domToReact函数，因为我还没有找到这些选项的文档。

预期结果：

<h1 style="font-size:42px">
  <span style="color:hotpink">keep me and make me pretty!</span>
</h1>

到目前为止，我无法修改嵌套节点（在这种情况下为<span>）。

实际结果：

<h1 style="font-size: 42px;">
    <span class="prettify">keep me and make me pretty!</span>
  </h1>

Answer 1

您必须将/videos/68444037/comments函数传递给replace作为其domToReact参数的一部分。从来源：

options

在此示例中，这意味着...

/**
 * Converts DOM nodes to React elements.
 *
 * @param  {Array}    nodes             - The DOM nodes.
 * @param  {Object}   [options]         - The additional options.
 * @param  {Function} [options.replace] - The replace method.
 * @return {ReactElement|Array}
 */

Answer 2

我可以在没有 domToReact 选项的情况下工作。我正在将从 Wordpress 获取的 JSON 对象中的 HTML 字符串传递给 react-syntax-highlighter。我还没有检查 html-react-parser 源代码以了解使用两者之间的区别，但是用 JSX 替换 HTML 标记似乎可以很好地与 domNode.attribs 一起使用。

该组件采用该 JSON 对象（由 Wordpress 帖子组成），将每个帖子映射到单独的解析部分，然后替换满足特定条件的每个解析部分的每个 pre 标记（在本例中、class=wp-block-code 或 class=CodeMirror) 与 JSX SyntaxHighlighter 标记，同时保留代码块的文本 (domNode.children[0].data)。

注意：在分析 JSON 对象时，我发现这些 domNode.children 数组都没有一个以上的位置，因此在我的情况下，位置 [0] 是所有需要的 - 显然，您的需求可能因人而异。

来自 html-react-parser 的命令或从 Wordpress 检索的 JSON 对象均未解构，因此您可以清楚地看到 API/命令。

import parse from 'html-react-parser';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { gruvboxDark } from 'react-syntax-highlighter/dist/esm/styles/hljs';

export const Blog = (props) => {
  return (
    <div>
      <h1>This is an example of a blog component</h1>
      <div>
        {props.posts.map((post, index) => (
          <div key={post.id}>
            <h3>{post.id}</h3>
            <div>{parse(post.title.rendered)}</div>
            <div>{parse(post.excerpt.rendered)}</div>
            <div>
              {parse(post.content.rendered, {
                replace: (domNode) => {
                  if (
                    (domNode.attribs && domNode.attribs.class === 'CodeMirror') ||
                    (domNode.attribs && domNode.attribs.class === 'wp-block-code')
                  ) {
                    return (
                      <SyntaxHighlighter
                        language="bash"
                        showLineNumbers={true}
                        style={gruvboxDark}
                        wrapLongLines={true}
                      >
                        {domNode.children[0].data}
                      </SyntaxHighlighter>
                    );
                  }
                },
              })}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

无法修改已解析的html中的子级

2 个答案: