Ist es möglich, einen Teilstring innerhalb eines Strings in ein anderes HTML-Tag oder -Attribut zu ändern?
P粉852114752
P粉852114752 2023-09-13 16:34:08
0
1
486

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.

P粉852114752
P粉852114752

Antworte allen(1)
P粉848442185

你可以根据提供的字符串来完成,但是如果将电子邮件地址作为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>
  );

};

这是一个非常简化的解决方案,但我认为你可以在你的情况下使用它。

Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage