Question

这是我的情况：

这是一个单页应用，正在使用True = False执行客户端路由。

我有一个react-router-dom，管理员将在其中创建AddBlogPostPage。

此页面具有大量输入和文本区域，可用于构建blogPosts段落和图像。
在blogPost输入中，当{{1}时，管理员将使用textarea输入要在<p>标记内呈现的段落文本。 }。
但是有时需要添加指向应用程序其他页面的链接，我正在执行以下操作：
管理员输入dangerouslySetInnerHTML：
- 例如：文本模式blogPost
- 这将被替换并呈现为textarea

但是，当我单击[products](/products)时，该应用程序会刷新，而不是使用<a href="/products">products</a>切换路由。那是因为我正在使用{{1} }标签，而不是<a>内置的react-router-dom组件。

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

从到目前为止的研究来看，这似乎是不可能的。还有其他解决方法吗？

Answer 1

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

我认为您正在以状态存储该文本区域信息。将其呈现为FROM状态时，请使用

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>

如何从文本渲染React-Router Link组件？

2 个答案: