Fügen Sie neue Elemente zu React-Markdown-Inhalten in Next.js hinzu, ohne JSX zu verwenden

Question

Ich verwende React-Markdown, um ein virtuelles DOM zu erstellen, das es ermöglicht, nur das geänderte DOM zu aktualisieren, anstatt es komplett neu zu schreiben. Es generiert den Inhalt im

-Tag. Ich möchte das

-Tag innerhalb des -Tags hinzufügen.

<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

可能为段落节点类型使用了自定义渲染函数。我不确定，但可能会有所帮助。

import React from 'react';
import ReactMarkdown from 'react-markdown';

const renderers = {
  paragraph: ({ node, ...props }) => {
    return <p {...props}><span>在此添加您的附加内容</span>{node.children}</p>;
  },
  // 根据需要使用您的自定义渲染器
};

const content = '在此添加您的markdown内容';

const App = () => {
  return (
    <ReactMarkdown renderers={renderers}>
      {content}
    </ReactMarkdown>
  );
};

export default App;