javascript - 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

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