react-markdown 中的自定义组件

Question

我想在 react-markdown 中创建一个自定义组件。具体来说，我需要能够创建一个允许我创建工具提示的标签。例如。 [名称]{ 工具提示内容}。我在 link 中找到了类似的解决方案。不幸的是，该组件是作为常规 div 而不是我的组件创建的。我不知道我到底做错了什么。

我的代码：

import React from "react";
import styled from "styled-components";

import ReactMarkdown from "react-markdown";

import directive from "remark-directive";
import { visit } from "unist-util-visit";
import { h } from "hastscript/html.js";

const Test = styled.span`
  font-size: 12rem;
  font-family: "DM Serif Display", serif;
`;

const TestComp = ({ ...props }) => {
  return <Test> {props.children}</Test>;
};

const components = {
  myTag: TestComp,
};

// 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;
  }
}

var markdown =
  ' Some markdown with a :myTag[custom directive]{title="My custom tag"}';

const Text = () => {
  return (
    <ReactMarkdown
      className={"markdown"}
      components={components}
      remarkPlugins={[directive, htmlDirectives]}
      children={markdown}
      linkTarget={"_blank"}
    />
  );
};

export default Text;

Answer 1

我用markdown-to-jsx来使用自定义组件。

https://www.npmjs.com/package/markdown-to-jsx

react-markdown 中的自定义组件

Custom components in react-markdown

markdown

reactjs