Es gibt eine React-Komponente, die einen String als Eigenschaft akzeptiert:
interface MyProps {
myInput: string;
}
export function MyComponent({ myInput }: MyProps) {
...
return (
<div>
{myInput}
</div>
);
};
Diese Komponente wird an anderer Stelle verwendet:
<MyComponent myInput="请通过test@test.com与我们联系" />
Meine Frage ist, können wir in diesem Fall die Farbe der E-Mail-Adresse ändern? Ändern Sie es beispielsweise in Blau.
Oder noch besser, schließen Sie den Text ein:
<a href="mailto:test@test.com" target="_blank"> test@test.com </a>
Ich bin mir nicht sicher, ob so etwas möglich ist, wenn die Art der Immobilie string ist.
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
你可以根据提供的字符串来完成，但是如果将电子邮件地址作为
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> ); };这是一个非常简化的解决方案，但我认为你可以在你的情况下使用它。