首页  >  问答  >  正文

在Next.js中向react-markdown内容中添加新元素,无需使用JSX

我使用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>

P粉184747536P粉184747536298 天前659

全部回复(1)我来回复

  • P粉311617763

    P粉3116177632024-01-18 00:23:45

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

    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;

    回复
    0
  • 取消回复