我使用一个对象数组来渲染卡片：

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>