react-markdown 和带参数的渲染器

问题描述

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

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

我的 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}
            />
  );
}

解决方法

试试这个解决方案。创建一个匿名函数并使用必要的 props

从中返回您的组件

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