react-markdown 和带参数的渲染器答案

【问题标题】：react-markdown and renderers with argumentsreact-markdown 和带参数的渲染器
【发布时间】：2020-12-21 01:48:26
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript reactjs react-markdown

【解决方案1】：

试试这个解决方案。创建一个匿名函数并使用必要的 props 从它返回您的组件

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

【讨论】：