如何从文本呈现 react-router Link 组件？答案

【问题标题】：How to render a react-router Link component from text?如何从文本呈现 react-router Link 组件？
【发布时间】：2019-10-31 04:09:58
【问题描述】：

这是我的情况：

这是一个使用react-router-dom 执行客户端路由的单页应用程序。

我有一个AddBlogPostPage，管理员将在其中创建blogPosts。

此页面包含大量输入和文本区域，可用于构建 blogPost 段落和图像。
在textarea 输入中，管理员将输入一段文本，当显示blogPost 时，该文本将在<p> 标记内呈现 使用dangerouslySetInnerHTML。
但有时需要添加指向应用程序其他页面的链接，我正在执行以下操作：
管理员输入textarea：
- 例如：文本模式[products](/products)
- 这被替换并呈现为<a href="/products">products</a>

但是当我点击<a> 时，应用程序会刷新而不是使用react-router-dom 切换路由。 那是因为我使用的是<a> 标签而不是@ react-router-dom内置的987654335@组件。

但是由于我使用dangerouslySetInnerHTML 渲染我的段落，在这种情况下如何显示React 组件Link 而不是html 标记<a>？

从我目前的研究来看，这似乎是不可能的。有没有其他办法解决这个问题？

【问题讨论】：

标签： javascript html reactjs react-router react-router-dom

【解决方案1】：

我很确定这不是最有效的方法，也不是真正可重复使用的。但这至少是一个起点。

我假设您正在将文本区域信息存储在状态中。当从状态渲染它时，使用

const firstText = this.state.userText.split('[products]');

获取标签之前的所有内容，然后

const lastText = firstText[1].split('[/products]');

获取链接后的所有内容。您的渲染将如下所示：

<p>
    {firstText[0]}
    <Link to="/products">{lastText[0]}</Link>
    {lastText[1]}
</p>

对于实际用例，您需要将其存储在状态中，跟踪所有标签的内容和位置，并将所有内容放入单独的状态条目中的数组中，以便您可以适当地映射输出。这无疑是一种方法，而不是一系列变量声明。而且我敢肯定它不是非常有效。但也不是不可能！

祝你好运。

【讨论】：

谢谢！我目前正在尝试构建类似的东西。到目前为止，这是我考虑过的唯一方法。我猜它应该可以工作。
另外，如果您使用这个起点来增加额外的代码，请确保您在引用它们的索引之前检查以确保像 lastText（或其他）这样的数组存在。

【解决方案2】：

你可以用我写的这个..

import React from 'react';
import {Link} from 'react-router-dom';
export const addLinkToText = (text) => {
        const sptx= text.split('|');
        const newTxt=sptx.map((txt,indx) => {
            const sptx2= txt.split(':');
            if(sptx2.length>1){
                return <Link key={`lk${indx}`} to={sptx2[1]}>{sptx2[0]}</Link>
            }
            return sptx2[0];
        });
        return newTxt;
}

然后像这样解析文本：

<div>{addLinkToText("some text |text for link:/path_of_url| more text.")}</div>

【讨论】：