IT技术 - REACT - 如何将 URL 字符串替换为 <a> 元素并正确呈现它 - 吾爱随笔录

鉴于以下内容：

Hi Christine,

Are you receiving?
--
Daniel Vieira Costa.
Frontend Developer | Zeuss, Inc.
Know It's Possible.
http://www.zeuss.com

我想将所有 URL（例如http://www.zeuss.com）替换为<a>元素/对象并在 React 内容中呈现它。

我的基本代码如下：

// regular expression used to find out all URL occorrences
let regexpression = /(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$])/ig;

// replace all URL occurrences to <a> elements
content = content.replace(regexpression, newLink => {
    return <a>{newLink}</a>
})

但是，它呈现以下结果：

Hi Christine, 

Are you receiving?
--
Daniel Vieira Costa.
Frontend Developer | Zeuss, Inc.
Know It's Possible.
[object Object]

元素[object Object]应该在哪里<a>。

我想避免使用 React（设置dangerouslySetInnerHtml属性）的原始 HTML 。有没有更好的实现？

let splitString = ['Hi Christine, Are you receiving? -- Daniel Vieira Costa. Frontend Developer | Zeuss, Inc. Know It's Possible.', 'http://www.zeuss.com'] let parsedResult = splitString.map((part) => { if (part.matches(regexpression)) { return <a>{part}</a> } return part }) return <div>{parsedResult}</div>