REACT - 如何将 URL 字符串替换为 <a> 元素并正确渲染

Question

给定以下内容：

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> elements/objects 并在 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 的原始 HTML（设置 dangerouslySetInnerHtml 属性）。有没有更好的实现方式？

Answer 1

你用那个语法创建的是一个反应元素，而 oyu 想要的是一个字符串，所以试试：

return '<a>' + newLink + '</a>'

无论如何您都必须使用 dangerouslySetInnerHtml，因为在替换操作后您将得到一个包含 HMTL 的字符串。

在回复评论时添加：

您实际上可以通过首先在 URL 处拆分字符串，然后将其放回到 JSX 表达式中来完成此操作。

假设您设法将字符串拆分成这样的数组（应该可行，但我将那部分留给您）：

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>

这应该可以在不使用 dangerouslySetInnerHtml 的情况下工作。

REACT - 如何将 URL 字符串替换为 <a> 元素并正确渲染

REACT - How to replace URL strings to <a> elements and rendering it properly

anchor

replace

reactjs