想要在数组中的字符串中提供超链接，并在Reactjs中作为道具传递

Question

我正在从一个数组中提供静态文本数据，该数组在我的React组件中进一步"映射">

const LinkElement = () => <Link to='/some-redirection-in-the-same-app'>Click here...</Link>
const EyelashGrowthData = [
{
key:"How does bimatoprost 0.03% ophthalmic solution work?",
data:`It is believed the growth cycle (anagen) phase is increased of your eyelash hair cycle. Anagen is the
growth phase of all hair. The increase in the length of the anagen phase therefore increases the
number of hairs in this growth phase.`   
},
{
key:"Is a doctor’s consultation and prescription required for this treatment?",
data:`Yes, this is a prescription-only medication to grow the eyelashes longer, fuller and darker, indicated
for people with inadequate or not enough lashes. This treatment needs to be prescribed by a doctor
to assure the proper treatment and use. Complete the ${LinkElement} now.`   
}
];

该EyelashGrowthData被进一步传递到道具中的某个组件并成为以下组件的CCD_ 2道具并以此方式服务data可能有很多变体，它们可能没有超链接但其中一些有超链接，应该在那里。

在EyelashGrowthData被传递到低于组件之前，有许多级别的组件

export ({data}) => {
data.map(item => { 
return (
<>
<Typo>
{item.key}
</Typo>
<Typo>
{item.data}
//this should render a ${LinkElement} in {item.data}, which will work perfectly as a link
</Typo>
......many other thing
</>
)
})
}

Answer 1

一种方法可以是将数据键更改为返回JSX:的React函数

const LinkElement = () => <Link to='/some-redirection-in-the-same-app'>Click here...</Link>
const EyelashGrowthData = [
{
key:"How does bimatoprost 0.03% ophthalmic solution work?",
data: () => `It is believed the growth cycle (anagen) phase is increased of your eyelash hair cycle. Anagen is the
growth phase of all hair. The increase in the length of the anagen phase therefore increases the
number of hairs in this growth phase.`   
},
{
key:"Is a doctor’s consultation and prescription required for this treatment?",
data: () => <> Yes, this is a prescription-only medication to grow the eyelashes longer, fuller and darker, indicated
for people with inadequate or not enough lashes. This treatment needs to be prescribed by a doctor
to assure the proper treatment and use. Complete the <LinkElement/> now.</>  
}
];

然后，您可以从第二个组件中简单地调用数据函数。您还可以处理字符串以及{typeof item.data === 'function' ? item.data() : item.data }等函数。