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

Posted 2023-02-21

【中文标题】如何从文本呈现 react-router Link 组件？

【英文标题】：How to render a react-router Link component from text?

【发布时间】：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>？

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

【参考方案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>