react-markdown 使用自定义组件时显示 div 而不是元素标签答案

【问题标题】：react-markdown shows div instead of element tag when using custom componentreact-markdown 使用自定义组件时显示 div 而不是元素标签
【发布时间】：2021-11-20 17:48:18
【问题描述】：

我正在尝试在 react-markdown ( remark ) 中编写一个自定义插件以支持下划线（使用 ~the underlined text~ 语法），问题是结果使用 div 标签而不是插入.

这是插件：

const UNDERLINE_REGEX = /~(.*)~/g;

const extractPosition = (string, start, end) => {
    const startLine = string.slice(0, start).split("\n");
    const endLine = string.slice(0, end).split("\n");

    return {
        start: {
            line: startLine.length,
            column: startLine[startLine.length - 1].length + 1,
        },
        end: {
            line: endLine.length,
            column: endLine[endLine.length - 1].length + 1,
        },
    };
};

const extractText = (string, start, end) => ({
    type: "text",
    value: string.slice(start, end),
    position: extractPosition(string, start, end),
});

const underlinePlugin = () => {
    function transformer(tree) {
        console.log(tree);
        visit(tree, "text", (node, position, parent) => {
            const definition = [];
            let lastIndex = 0;

            const matches = node.value.matchAll(UNDERLINE_REGEX);

            for (const match of matches) {
                const value = match[1];
                const type = "underline";
                const tagName = "ins";

                if (match.index !== lastIndex) {
                    definition.push(
                        extractText(node.value, lastIndex, match.index)
                    );
                }

                definition.push({
                    type,
                    tagName,
                    children: [
                        extractText(
                            node.value,
                            match.index + 1, // 1 is start ~
                            match.index + value.length + 1 // 1 is start ~
                        ),
                    ],
                    position: extractPosition(
                        node.value,
                        match.index,
                        match.index + value.length + 2 // 2 is start and end ~
                    ),
                });

                lastIndex = match.index + value.length + 2; // 2 is start and end ~
            }

            if (lastIndex !== node.value.length) {
                const text = extractText(
                    node.value,
                    lastIndex,
                    node.value.length
                );
                definition.push(text);
            }

            const last = parent.children.slice(position + 1);
            parent.children = parent.children.slice(0, position);
            parent.children = parent.children.concat(definition);
            parent.children = parent.children.concat(last);
        });
    }

    return transformer;
};

这是 Markdown 的用法：

<ReactMarkdown
        remarkPlugins={[plugin]}
        components={{
            ins: ({ value }) => <ins>{value}</ins>,
            underline: ({ value }) => <ins>{value}</ins>,
        }}>
        ~Hello~, **world**!
    </ReactMarkdown>

这是结果

我使用了type: 'underline'、type: 'ins'、tagName: 'underline'、'tagName: 'ins'，但它们都不起作用。我不知道我在这里做错了什么。

感谢您的宝贵时间:)

【问题讨论】：

标签： remarkjs react-markdown

【解决方案1】：

remark markdown processor 支持 CommonMark specification，但不支持 ins 或 del 标签。 react-markdown 组件可能受制于the CommonMark limitation (Why no underline?)。

【讨论】：