My multiple custom Component are only parsed into one

[xieisabug]

Code

My code like this:

interface CustomComponents extends Components {
    fileattachment: React.ElementType;
}
... some other code

<ReactMarkdown
    children={messageContent}
    remarkPlugins={[remarkMath, remarkBreaks]}
    rehypePlugins={[rehypeRaw, rehypeKatex]}
    components={
        {
            fileattachment: MessageFileAttachment,
        } as CustomComponents
    }
/>

// MessageFileAttachment component
import React from "react";

interface MessageFileAttachmentProps {
    content?: string;
    name: string;
}

const MessageFileAttachment: React.FC<MessageFileAttachmentProps> = (props) => {
    const { content, name } = props;

    return (
        <div
            className="message-file-attachment"
            title={content?.substring(0, 20)}
        >
            <span>文件名称：{name}</span>
        </div>
    );
};

export default MessageFileAttachment;

my messageContent like this:

test:
<fileattachment name="123" />
<fileattachment name="456" />

or i also test this:

test
<fileattachment name="123" ></fileattachment>
<fileattachment name="456"></fileattachment>

Confuse

and react-markdown is parse fileattachment but just parse to one:

This is what I want happen by editing the DOM directly:

I try to print log in Component, it also just print once.

is there have some config or some plugin can fix it?

[wooorm]

Please please provide more info. What is wrong. What is right. What happens. What do you want to happen. Please be more clear.

[xieisabug]

Sorry for that, I'm not sure what you need from me, the react-markdown related code has already been provided at the top. Do you need the entire page's code? My markdown content is also pasted above, my markdown content contains two fileattachment tags but there were only parsed once, and also showing only one on the page, I need parse markdown content tow fileattachment tag and show two on the page.

[wooorm]

What you show that happens, doesn’t happen.
Assuming:

test
<fileattachment name="123" ></fileattachment>
<fileattachment name="456"></fileattachment>

Pasting that on https://remarkjs.github.io/react-markdown/. Enabling rehype-raw there. And then inspecting the DOM of the result. Shows that it works.

[xieisabug]

Certainly, I am unsure about what I had previously misconstrued, but it is now functioning correctly. I deeply apologize for any inconvenience caused and for the time it may have consumed.

I conducted a test with the following:

test:
<fileattachment name="123" />
<fileattachment name="456" />

This is parsed into:

<fileattachment name="123">
<fileattachment name="456"></fileattachment>
</fileattachment>

Given that my component does not render children, it will only be parsed once. However, I only require one of these methods to be effective for display purposes, and I greatly appreciate your assistance and understanding.

[wooorm]

This project deals with markdown and html. What you show here is not html. That's jsx. You cannot use a self-closing slash in html. You can only do that in jsx. If you want that, use MDX. This project is not that

[xieisabug]

OK, thank you