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

Question

这是我的情况：

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

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

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

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

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

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

Answer 1

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

我假设您正在将 textarea 信息存储在 state 中。 在从状态渲染它时，使用

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>

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

祝你好运。

Answer 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>