Хотите использовать гиперссылку внутри строки, которая находится в массиве и передается в качестве опоры, в Reactjs

Question

Я отправляю stati c текстовые данные из массива, который далее отображается в моем компоненте React 'Mapped'

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 далее передается некоторому компоненту в реквизит и становится data реквизит нижеприведенного компонента и обслуживается следующим образом. Может быть очень много вариантов 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

Одним из подходов может быть изменение ключей данных на функции React, которые возвращают JSX:

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 }.