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

Question

我想通过用React组件(即<StyledParagraph>和<StyledLink>)替换特定的标记(如<p>和<a> )来呈现一大块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

您必须将replace函数作为其options参数的一部分传递给domToReact。在源代码中：

/**
 * 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}
 */

在本例中，这意味着...

function replaceHtmlWithReact({ attribs, children }) {
  if (!attribs) return;

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

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

Answer 2

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

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

注意:在分析JSON对象时，我发现这些domNode.children数组都没有一个位置，所以在我的例子中只需要位置[0] -显然，您的需求可能会有所不同。

从Wordpress检索到的html-react-parser或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>
  );
};