React-Markdown 自定义组件声明，如何在渲染器中声明使用自定义组件？

IT技术 javascript reactjs typescript markdown react-markdown
2021-05-10 08:25:39

问题

使用 React-Markdown，我可以完全使用我的自定义构建组件。但这是在降价中使用特定的预先构建的关键字。喜欢段落或图像。这非常有效。但问题是这些似乎都是预先构建的词/条件，如段落、标题或图像。

我找不到在我的降价中添加新关键字的方法，例如要使用的“CustomComponent”。这就是我现在需要的全部><

这对我来说很好用，可以将降价的图像变成我在其他地方制作的自定义“页脚”组件。我知道这很荒谬，但它有效。但我不知道如何让这个渲染器接受/创建一个新的关键字，比如“emoji”或“customComponent”或“somethingSilly”。

let body = 
    `![Fullstack React](https://dzxbosgk90qga.cloudfront.net/fit-in/504x658/n/20190131015240478_fullstack-react-cover-medium%402x.png)`;

const renderers = {
    image: () => <Footer/>
};

<ReactMarkdown source={body} renderers={renderers} />;

我过去做过的一些工作：

一些文档：https : //reposhub.com/react/miscellaneous/rexxars-react-markdown.html https://github.com/rexxars/commonmark-react-renderer/blob/master/src/commonmark-react-renderer。 js#L50

示例：https : //codesandbox.io/s/react-markdown-with-custom-renderers-961l3?from-embed=&file=/ src/ App.js

但是没有任何迹象表明我可以如何使用“CustomComponent”来指示注入自定义组件。

用例/背景

我正在尝试从我的数据库中检索一篇文章，该文章的格式与 Markdown 格式类似（基本上是一个巨大的字符串）。我正在使用 typescript 和 redux 的常规react——这是我的应用程序中唯一需要这个的部分。

"
# Title

## Here is a subtitle

Some text

<CustomComponentIMade/>

Even more text after.


<CustomComponentIMade/>

"
1个回答

我知道就您的目的而言，它很可能有点晚了，但我已经设法使用自定义备注组件解决了这个问题。

基本上你需要使用该remark-directive插件以及一个小的自定义备注插件（我直接从remark-directive文档中得到了这个插件）

然后在 React Markdown 中，您可以为例如指定插件、自定义渲染器和自定义标签。

import React from 'react'
import ReactMarkdown from 'react-markdown'
import {render} from 'react-dom'
import directive from 'remark-directive'
import { MyCustomComponent } from './MyCustomComponent'
import { visit } from "unist-util-visit" 
import { h } from "hastscript/html.js"

// react markdown components list
const components = {
  image: () => <Footer/>,
  myTag: MyCustomComponent
}

// remark plugin to add a custom tag to the AST
function htmlDirectives() {
  return transform

  function transform(tree) {
    visit(tree, ['textDirective', 'leafDirective', 'containerDirective'], ondirective)
  }

  function ondirective(node) {
    var data = node.data || (node.data = {})
    var hast = h(node.name, node.attributes)

    data.hName = hast.tagname
    data.hProperties = hast.properties
  }
}

render(
  <ReactMarkdown components={components} remarkPlugins={[directive, htmlDirectives]}>
    Some markdown with a :myTag[custom directive]{title="My custom tag"}
  </ReactMarkdown>,
  document.body
)

因此，在您的降价中，无论您有类似的东西:myTag[...]{...attributes}都应该将MyCustomComponentwith渲染attributes为props。

抱歉，我还没有测试过代码，但希望它能传达出事情的要点，如果您需要一个工作示例，请告诉我，我会尽力设置一个。

其它你可能感兴趣的问题
上一篇react-router重定向未按预期工作 下一篇<Link> onClick 导致我的页面刷新