[Bug]: ID is missing when the title is used with the component

[bosens-China]

版本信息

System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 76.27 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Browsers:
    Chrome: 128.0.6613.85
    Safari: 17.6
  npmPackages:
    rspress: ^1.28.0 => 1.28.2

问题详情

复现链接

none

复现步骤

不需要

[Timeless0911]

Try to write # inside your component code instead of outside.

[bosens-China]

😀明天试一下这个

[bosens-China]

• docs/components/TextVocabularyOutput/index.tsx

import { Root } from "../../types/textTypes";

interface Props {
  text: string;
  vocabulary: Root["vocabulary"];
}

const textContrast = (a: string, b: string) => {
  return new RegExp(a, "i").test(b);
};

/**
 * 输出文本，如果包含本课的新词会重点描述
 * @param param0
 */
export const TextVocabularyOutput: React.FC<Props> = ({ text, vocabulary }) => {
  const arr = text
    .split(/\s/g)
    .map((item, index, array) => {
      const isEnd = array.length === index - 1;
      const text = isEnd ? "" : " ";
      if (vocabulary.find((f) => textContrast(f.word, item))) {
        return [<span key={item}>{item}</span>, text];
      }
      return [item, text];
    })
    .flat(2);

  return <># {arr}</>;
};

在mdx中如果这样调用

# Lesson 1 Excuse me! 对不起！

<TextVocabularyOutput text={data.title} vocabulary={data.vocabulary} />

输出

[Timeless0911]

If you using .tsx, return <># {arr}</>; means return simple text.

The tsx component should not be used to generate markdown headers and more dynamic markdown/html structures, which will lack a lot of metadata information when analyzing at build time. The correct usage of the tsx component should be to write a component written by react that not return markdown structure.

If you use the original method in your issue screenshot, the id and href attributes cannot be generated when mdx is compiled.