如何在nextjs中的react-markdown内容中添加新元素而不使用jsx？

Question

我使用react-markdown构建虚拟dom，它允许仅更新变化的DOM，而不是完全覆盖。它生成

标签中的内容。我想在

标签内添加标签。

                <ReactMarkdown
              components={
                {
                code({ node, inline, className, children, ...props }) {
                  const match = /language-(\w+)/.exec(className || '');
                  return !inline && match ? (
                    <SyntaxHighlighter
                      {...props}
                      style={a11yDark}
                      language={match[1]}
                      PreTag="div"
                    >
                      {String(children).replace(/\n$/, '')}
                    </SyntaxHighlighter>
                  ) : (
                    <code {...props} className={className}>
                      {children}
                    </code>
                  );
                },
              }}
            >
              {content}
            </ReactMarkdown>

Answer 1

如果要在生成的代码标签内添加 div 标签，则需要修改 Components 属性中的代码组件以将子元素包装在元素中。

<ReactMarkdown
  components={{
    code({ node, inline, className, children, ...props }) {
      const match = /language-(\w+)/.exec(className || '');
      return !inline && match ? (
        <SyntaxHighlighter
          {...props}
          style={a11yDark}
          language={match[1]}
          PreTag="div"
        >
          {/* Wrap children in a <div> */}
          <div>
            {String(children).replace(/\n$/, '')}
          </div>
        </SyntaxHighlighter>
      ) : (
        <code {...props} className={className}>
          {children}
        </code>
      );
    },
  }}
>
  {content}
</ReactMarkdown>

此更改保证了当代码块的内容以语法突出显示的方式显示时，代码块的内容被包装在 div 元素中。请注意，代码期望 SyntaxHighlighter 组件提供一个 PreTag 参数，该参数定义突出显示的代码块的包装器元素。如果 SyntaxHighlighter 组件不接受 PreTag 属性，您需要修改代码。