在反应中显示来自文本的链接答案

【问题标题】：Display Links from text in react在反应中显示来自文本的链接
【发布时间】：2020-09-21 10:12:13
【问题描述】：

我创建了一个标记系统，用户可以在其中使用 @ 表示法标记文本中的其他用户，我正在保存整个推文客栈数据库，但是在检索时我得到了这样显示的文本

Hi My first tweet<Link to='/userprofile/ron'> @ron</Link>

如何让它显示出来

Hi My first tweet [@ron][1]

@ron 是一个链接

【问题讨论】：

是否有更改数据保存方式的选项？如果您可以在没有 <link> 标记的情况下存储文本，而只存储 @name，则可以在显示文本时动态构建这些链接（如果您更改配置文件 URL，这也可以防止旧链接中断路径）
你能举个例子@DBS
stackoverflow.com/questions/51569981/…

【解决方案1】：

您可以使用dangerouslySetInnerHTML。

const text = "Hi My first tweet<Link to='/userprofile/ron'> @ron</Link>";

<div dangerouslySetInnerHTML={{ __html: text }} />

注意：确保从react-router 导入Link。另请记住，由于潜在的 XSS 攻击，这是有风险的。

【讨论】：

【解决方案2】：

// 1. 创建组件

let linkItem = (props) => <p>Hi My first tweet <Link>{props.name}</Link></p>

【讨论】：