有一個接受字串作為屬性的React元件：
interface MyProps {
myInput: string;
}
export function MyComponent({ myInput }: MyProps) {
...
return (
<div>
{myInput}
</div>
);
};
這個元件在其他地方被使用：
<MyComponent myInput="请通过test@test.com与我们联系" />
我的問題是，我們能在這種情況下改變電子郵件地址的顏色嗎？例如改為藍色。
或更好的是，將該文字包裝在：
<a href="mailto:test@test.com" target="_blank"> test@test.com </a>
不確定如果屬性的類型是string是否可以做到這樣的事情。
你可以根據提供的字串來完成，但如果將電子郵件地址作為
MyComponent的一個單獨屬性提供，會更容易。在不改變元件的情況下，我會使用一些簡單的正規表示式從字串中取得電子郵件地址，然後你可以根據需要進行任何操作。
下面是一個簡單且不完整的正規表示式範例：
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> ); };這是一個非常簡化的解決方案，但我認為你可以在你的情況下使用它。