我要遍历的对象中有一些数据,并且正在从该对象中提取属性(字符串)以呈现到屏幕。
对象看起来像这样:
`object: { id: 1, sample: 'To learn all about React, click here https://en.wikipedia.org/wiki/React_(JavaScript_library)' }`
我做了很多研究,并指出了使用Linkify插件的许多答案。我像这样设置Linkify插件:
<Linkify>{sample}</Linkify>
这很好用,但是我想知道是否可以修改字符串,以便不显示实际地址,而是可以将地址分配给单词“这里”。例如:
'To learn all about React, click `here`'.
Linkify插件有可能吗?还是我需要做些别的事情?
答案 0 :(得分:1)
您也可以通过react实现。创建一个链接组件,该组件接受2个道具。 {url}和{link}。
hyperLink.js
import React from 'react'
export default ({ text, link }) =>{
return(
<a href={link}> {text} </a>
)
}
然后将index.js导入到索引中
import Hyperlink from './hyperLink'
<div>
To learn more about react click <Hyperlink link={#} text="here">
</div>
答案 1 :(得分:1)
您可以尝试解析字符串以从中获取URL。然后使用url作为标记中href属性的值。/ 要获取网址,您可以使用正则表达式。
(https?:\/\/\S+)|([a-z]+\.[a-z]+(?:\/\S+)?)
我尝试使用正则表达式解析您的字符串,并且完全可以正常工作。 我从https://stackoverflow.com/a/39944457/10100750这里获取了此正则表达式。您可以查看该链接以进一步了解此正则表达式。