[英]NextJS/JSX: How to insert dynamically generated JSX without using dangerouslySetInnerHTML?
Consider a string "Foo #bar baz #fuzz".考虑一个字符串“Foo #bar baz #fuzz”。 I want to display a "Caption" component in NextJS where the hashtags are hyperlinks.我想在 NextJS 中显示一个“标题”组件,其中的主题标签是超链接。
My current approach is:我目前的做法是:
import Link from "next/link";
const handleHashTag = str =>
str
.split(" ")
.map(el => {
const r = /(.*)(#[^ ]*)/;
const matched = el.match(r);
if (matched)
return `<span>${matched[1]}</span><Link href="${matched[2]}"><a>${matched[2]}</a></Link>`;
return el;
})
.join(" ");
function Caption(catption) {
const linkedCaption = handleHashtag(caption)
return <div dangerouslySetInnerHTML={__html: }>
}
Corrosponding HTML has empty span
tags in place of <Link>
.对应的 HTML 有空的span
标签代替<Link>
。 This approach does relies on dangerouslySetInnerHTML.这种方法确实依赖于危险的SetInnerHTML。 Is there a way to implement the functionality of <Link>
without using dangerouslySetInnerHTML
?有没有办法在不使用dangerouslySetInnerHTML
<Link>
情况下实现<Link>
的功能?
如果有匹配项,则返回一个组件,而不是字符串(基本上没有反引号和美元),并且不加入数组而是使用 jsx 中的 map 渲染其中的元素
A solution like react-hashtag addresses this problem.像react-hashtag这样的解决方案解决了这个问题。 Instead of using react-router
as its source uses, you can use your custom Link component, in this case next/link
.您可以使用自定义的 Link 组件,而不是使用react-router
作为其源,在这种情况next/link
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.