问题标签 [react-markdown]

我有下面的代码，它可以帮助我显示带有语法突出显示的降价组件。一切正常，除非我输入```总是会发生，因为我从输入字段中获取降价源。

正如我之前所说，每当我输入```或~~~它破坏应用程序之前，我能够使用带有此错误消息的剩余引号关闭它

Reactmarkdown Uncaught TypeError: Cannot read property 'match' of undefined at getNewLines (highlight.js:10)

到目前为止我所尝试的：

我希望在 react html markdown 实现的第二段之后附加一个按钮。我目前正在使用 react-markdown 来编译我的 html 代码。我在这里尝试做的几件事：

1. 获取 react markdown html 的第 n 个元素（例如：p:2nd-child）
2. 创建新元素（例如：document.createElement('button')）
3. 在 (p:2nd-child) 元素之后附加新按钮

我应该使用 ref 来实现这一点，还是像附加纯 JavaScript 一样简单？如果有更好的解决方案，请接受其他建议。

索引.jsx

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

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

我的 page.js

组件：

我在 react markdown sich 中以表格、列表和 h 标签的形式传递各种数据。我想知道如何分别设置每个元素的样式。我到处搜索，但除了粗体或强调等之外，没有提到如何设置元素的样式。我想我可以在 ReactMarkdown 组件中传递一个类名来设置它的样式，但这不仅仅是为组件提供样式。我如何设计其中的各种元素？

我正在尝试访问对 react-markdown 中每个段落/标题的附加引用。但我不知道如何在下面的 c 中添加 ref。

我试图在我的反应应用程序中呈现 Markdown 文件。

我使用 react-markdown 库并使用以下命令将 MD 转换为文本：

以上是将我的变量保存到一个名为 markdown 的状态中，然后我尝试使用以下方法渲染它：

它的渲染很好，但我所有的图像都像这样显示：

有人可以帮助我如何渲染图像以及我需要在哪里存储它

我在 github 和 react.markdown 包的 index.d.ts 上都找不到任何东西。它看起来像一个非常简单的例子，但整个谷歌不包含任何例子。我为 Markdown 组件编写了一个自定义渲染器，但我无法确定渲染器的类型

段落的类型是什么？我检查它是渲染器：

我不知道要传递什么作为 T。我试过 HtmlParagraphElement 或任何。

我编写了这个语法来获取 .md 文件中的下标：

react-markdown没有将其解析为下标。我发现包remark-sub-super和这个插件如下：

这给了我一个错误：TypeError: Cannot set property 'sub_super' of undefined。我还添加skipHtml=true了组件并将其写入.md文件中：

这也不起作用。我正在使用next.js。

问题

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

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

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

我过去做过的一些工作：

一些文档： 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”来指示注入自定义组件。

用例/背景

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

在我目前正在开发的应用程序中，有一个“描述”列，我希望它有富文本。这将以 Markdown 格式存储在我的数据库中。无论如何，当使用 react-table 让单元格包含另一个组件中的内容时，在这种情况下，内容可以由 react-markdown 呈现吗？

在实现 react-table 之前，我能够使用 解析描述单元格中的降价<td><ReactMarkdown>{item.description}</ReactMarkdown></td>，但我没有看到使用 react-table 完成此操作的方法。

这是有问题的代码：https ://github.com/TechValleyCenterOfGravity/STUFF/blob/main/src/App.js