React Markdown - 如何将自定义简码呈现到组件中

Question

我正在使用 React Markdown (https://github.com/rexxars/react-markdown) 来呈现 markdown 内容。

我想问一下如何呈现我们在降价中定义的特定短代码。

例如，在我的降价内容中，我可以插入这个短代码[[ table product="mask" ]]

然后 React Markdown 组件可以拾取它，并渲染一个我之前定义的自定义组件（例如<Table product="mask" />）。

我已阅读文档，但找不到任何文档。如果您以前有这样做的经验，请告诉我。

非常感谢。

Answer 1

您将需要 remark-shortcodes 插件并定义一个 renderers 字段来告诉 ReactMarkdown 如何处理您的短代码：

const YourComponent = (content: string) => (
      <ReactMarkdown
        source={content}
        plugins={[
          [require("remark-shortcodes"), {startBlock: "[[", endBlock: "]]", inlineMode: true }]
        ]}
        renderers={{ shortcode: Shortcode }}
      />
)

const Shortcode = (props: any) => {
  /*
  props will looks something like:
    {
      "type": "shortcode",
      "identifier": "MailchimpForm",
      "attributes": { "id": "chfk2" }
    }
  see: https://github.com/djm/remark-shortcodes
  */
  switch (props.identifier) {
    case 'table':
      return <Table .../>;
    default:
      throw new Error('unknown shortcode')
  }
};

您可能需要也可能不需要startBlock、endBlock 和inlineMode 选项，具体取决于您正在构建的内容。