有一个接受字符串作为属性的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> ); };这是一个非常简化的解决方案，但我认为你可以在你的情况下使用它。