在文本视图中反应原生可点击链接超链接/mailto

问题描述

如何实现一个组件，以便在我将文本传递给它时。 文本中的所有超链接 (https://somelink.com) 都应该可以点击。 文本中的所有电子邮件([e-mail]) 都应打开设备上的默认邮件应用

解决方法

假设您想要一个随时可用的实现，您可以在文档的 react-string-replace 部分之后使用 Multiple replacements on a single string：

const text = 'Hey @ian_sinn,check out this link https://github.com/iansinnott/ Hope to see you at #reactconf';
let replacedText;

// Match URLs
replacedText = reactStringReplace(text,/(https?:\/\/\S+)/g,(match,i) => (
  <a key={match + i} href={match}>{match}</a>
));

// Match @-mentions
replacedText = reactStringReplace(replacedText,/@(\w+)/g,i) => (
  <a key={match + i} href={`https://twitter.com/${match}`}>@{match}</a>
));

调整使用的正则表达式和呈现的组件以匹配您的用例。