带有参数的 react-markdown 和渲染器

Question

我正在使用 React Markdown (https://www.npmjs.com/package/react-markdown) 在我的 NextJS 项目中呈现 markdown 内容。

我已经创建了一个名为“ImageRenderer”的简单组件，我需要向该组件传递一个参数（在本例中为 slug）和道具，但我不知道如何：

我的page.js

<ReactMarkdown source={obj.default} escapeHtml={false} renderers={{ "image": ImageRenderer }} />

组件：

export default function ImageRenderer(props) {
  const imageSrc = props.src;
  const altText = props.alt;

  return (
          <img
              data-loading="lazy" 
              data-slug={slug}
              data-orig-file={imageSrc}
              alt={altText}
            />
  );
}

Answer 1

试试这个解决方案。使用必要的 props

创建一个匿名函数和 return 您的组件

<ReactMarkdown 
  source={obj.default}
  escapeHtml={false}
  renderers={{ 
    "image": () => <ImageRenderer src="YOUR_SRC" alt="YOUR_ALT" /> 
  }} 
/>

带有参数的 react-markdown 和渲染器

react-markdown and renderers with arguments

javascript

reactjs

react-markdown