能否將字串中的子字串變更為不同的HTML標籤或屬性？

Question

有一個接受字串作為屬性的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是否可以做到這樣的事情。

Answer 1

你可以根據提供的字串來完成，但如果將電子郵件地址作為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>
  );

};

這是一個非常簡化的解決方案，但我認為你可以在你的情況下使用它。