Adakah mungkin untuk menukar subrentetan dalam rentetan kepada tag atau atribut HTML yang berbeza?

Question

Terdapat komponen React yang menerima rentetan sebagai sifat:

interface MyProps {
  myInput: string;
}

export function MyComponent({ myInput }: MyProps) {
   ...
   return (
     <div>
       {myInput}
     </div>
   );
};

Komponen ini digunakan di tempat lain:

<MyComponent myInput="请通过test@test.com与我们联系" />

Persoalan saya, bolehkah kita menukar warna alamat e-mel dalam kes ini? Contohnya, tukar kepada biru.

Atau lebih baik lagi, bungkus teks itu dalam:

<a href="mailto:test@test.com" target="_blank">
   test@test.com
</a>

Tidak pasti jika perkara seperti ini boleh dilakukan jika jenis harta itu string.

Answer 1

Anda boleh melakukannya berdasarkan rentetan yang disediakan, tetapi lebih mudah jika alamat e-mel disediakan sebagai atribut yang berasingan MyComponent.

Tanpa menukar komponen, saya akan menggunakan beberapa regex mudah untuk mendapatkan alamat e-mel daripada rentetan dan kemudian anda boleh melakukan apa sahaja yang anda mahu.

Berikut ialah contoh ungkapan biasa yang ringkas dan tidak lengkap:

const SUPER_SIMPLE_EMAIL_REGEX = /[a-z0-9.]{1,}@test.com/gi; // 不要使用这个

export function MyComponent({ myInput }: MyProps) {
   const match = myInput.match(SUPER_SIMPLE_EMAIL_REGEX);

  if (!match.length) {
    return (
      <div>
        {myInput}
      </div>
    );
  }

  const textWithoutEmail = myInput.replace(match[0], '');

  return (
    <div>
      <span>{textWithoutEmail}</span>
      <a href={`mailto:${match[0]}`} target="_blank">
        match[0]
      </a>
    </div>
  );

};

Ini adalah penyelesaian yang sangat mudah tetapi saya fikir anda boleh menggunakannya dalam kes anda.