javascript - 如何将 Markdown 的一小部分解析为 React 组件？

Question

我有一个非常小的 Markdown 子集以及一些自定义 html，我想将它们解析为 React 组件。例如，我想转换以下字符串:

hello *asdf* *how* _are_ you !doing! today

进入以下数组:

[ "hello ", <strong>asdf</strong>, " ", <strong>how</strong>, " ", <em>are</em>, " you ", <MyComponent onClick={this.action}>doing</MyComponent>, " today" ]

然后从 React 渲染函数返回它(React 会将数组正确渲染为格式化的 HTML)

基本上，我想让用户选择使用一组非常有限的 Markdown 将他们的文本转换为样式组件(在某些情况下是我自己的组件!)

危险地SetInnerHTML是不明智的，我不想引入外部依赖，因为它们都很重，而我只需要非常基本的功能。

我目前正在做类似的事情，但它非常脆弱，并且不适用于所有情况。我想知道是否有更好的方法:

function matchStrong(result, i) {
  let match = result[i].match(/(^|[^\\])\*(.*)\*/);
  if (match) { result[i] = <strong key={"ms" + i}>{match[2]}</strong>; }
  return match;
}

function matchItalics(result, i) {
  let match = result[i].match(/(^|[^\\])_(.*)_/); // Ignores \_asdf_ but not _asdf_
  if (match) { result[i] = <em key={"mi" + i}>{match[2]}</em>; }
  return match;
}

function matchCode(result, i) {
  let match = result[i].match(/(^|[^\\])```\n?([\s\S]+)\n?```/);
  if (match) { result[i] = <code key={"mc" + i}>{match[2]}</code>; }
  return match;
}

// Very brittle and inefficient
export function convertMarkdownToComponents(message) {
  let result = message.match(/(\\?([!*_`+-]{1,3})([\s\S]+?)\2)|\s|([^\\!*_`+-]+)/g);

  if (result == null) { return message; }

  for (let i = 0; i < result.length; i++) {
    if (matchCode(result, i)) { continue; }
    if (matchStrong(result, i)) { continue; }
    if (matchItalics(result, i)) { continue; }
  }

  return result;
}

Here is my previous question这导致了这一点。

Answer 1

看起来您正在寻找一个小型的非常基本的解决方案。不是像 react-markdown-it 这样的“ super 怪物”:)

我想向您推荐https://github.com/developit/snarkdown看起来非常轻巧漂亮!只有 1kb 并且非常简单，如果您需要任何其他语法功能，您可以使用它并扩展它。

支持的标签列表https://github.com/developit/snarkdown/blob/master/src/index.js#L1

更新

刚刚注意到 react 组件，一开始就错过了。因此，这对您来说非常好，我相信以该库为例并实现您的自定义所需组件即可完成它，而无需危险地设置 HTML。图书馆很小而且很干净。玩得开心! :)