[英]How to render a react-router Link component from text?
Here's my situation:这是我的情况:
This is a Single Page App that is using react-router-dom
to perform client-side routing.这是一个单页应用程序,它使用react-router-dom
来执行客户端路由。
I have a AddBlogPostPage
where the admin will create blogPosts
.我有一个AddBlogPostPage
管理员将在其中创建blogPosts
。
blogPost
paragraphs and images.这个页面有很多输入和文本区域来构建blogPost
段落和图像。textarea
input, the admin will enter a paragraph text that will be rendered inside a <p>
tag using dangerouslySetInnerHTML
when the blogPost
is displayed.在textarea
输入中,管理员将输入一段文本,该文本将在显示blogPost
时使用dangerouslySetInnerHTML
的blogPost
在<p>
标签内呈现。textarea
:管理员在textarea
输入:
[products](/products)
例如:文本模式[products](/products)
<a href="/products">products</a>
这被替换并呈现为<a href="/products">products</a>
But when I click on the <a>
the App refreshes other than switch routes with react-router-dom
.但是当我点击<a>
,应用程序会刷新,而不是使用react-router-dom
切换路由。 That is because I'm using an <a>
tag instead of a Link
component that comes built-in with react-router-dom
.那是因为我使用的是<a>
标签而不是react-router-dom
内置的Link
组件。
But since I'm rendering my paragraphs with dangerouslySetInnerHTML
, how can I display the React component Link
instead of an html tag <a>
in this situation?但是由于我使用dangerouslySetInnerHTML
的SetInnerHTML 渲染我的段落,在这种情况下如何显示 React 组件Link
而不是 html 标签<a>
?
From my research so far, this does not seem to be possible.从我目前的研究来看,这似乎是不可能的。 Is there any other way around this?有没有其他办法解决这个问题?
I'm quite sure this isn't the the most efficient way of doing it, nor is it really reuseable.我很确定这不是最有效的方法,也不是真正可重用的。 But here is, at least, a starting point.但这里至少是一个起点。
You're storing that textarea information in state, I assume.我假设您正在将 textarea 信息存储在 state 中。 When rendering it FROM state, use在从状态渲染它时,使用
const firstText = this.state.userText.split('[products]');
to get everything before your tag, then获取标签之前的所有内容,然后
const lastText = firstText[1].split('[/products]');
to get everything after your link.获取链接后的所有内容。 Your render will look something like:您的渲染将类似于:
<p>
{firstText[0]}
<Link to="/products">{lastText[0]}</Link>
{lastText[1]}
</p>
For an actual use case, you'll want to store that in state, keep track of what & where all of your tags are, and throw everything into an array in a separate state entry so you can map the output appropriately.对于实际用例,您需要将其存储在状态中,跟踪所有标签的内容和位置,并将所有内容放入单独的状态条目中的数组中,以便您可以适当地映射输出。 This would undoubtedly be a method instead of a series of variable declarations.毫无疑问,这将是一个方法而不是一系列变量声明。 And I'm sure it's not terribly efficient.而且我确信它不是非常有效。 But it's not impossible!但这并非不可能!
Best of luck.祝你好运。
You can use this I write for that..你可以用我写的这个..
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;
}
And then parse text like this:然后像这样解析文本:
<div>{addLinkToText("some text |text for link:/path_of_url| more text.")}</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.