Rumah > Soal Jawab > teks badan
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
.
P粉8484421852023-09-14 11:45:12
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.