我使用一个对象数组来渲染卡片:
someData = [
{
title: "some title",
text: "some text where i need put link on word",
linkedWord: "where"
}
]
或者它可以是linkedWord的数组。
然后我用这些数据渲染我的卡片:
{
someData.map(item=> {
<Card data={item} />
}
)
}
问题是,我如何在Card组件中将链接放在Word上?
我试图使用分割文本之前预期的链接和之后,但它只适用于1预期的链接。
我试着这样做:
const [strBefore, setStrBefor] = useState()
const [strAfter, setStrAfter] = useState()
const [LinkIndex, setLinkIndex] = useState()
useEffect(() => {
if (props.data.link) {
let test = props.data.title.split(" ")
test.map((item, index) => {
if(item === props.data.link) {
setLinkIndex(index)
}
})
if(LinkIndex === 0) {
setStrAfter(test.splice(LinkIndex + 1, test.length).join(' '))
}
else if(LinkIndex === test.length) {
setStrAfter('')
}
else {
setStrBefor(test.splice(0, LinkIndex).join(' '))
setStrAfter(test.splice(LinkIndex, test.length).join(' '))
}
}
},[LinkIndex])
并渲染:
<h3>{strBefore} <a href='#'>{props.data.link}</a> {strAfter}</h3>
2条答案
按热度按时间myzjeezk1#
您需要在href:中插入链接而不是做这个
你需要做的
9cbw7uwe2#
用marked-react解决这个问题
更改对象中的关键帧
使用Markdown组件
并在链接上换行