在key hooks react的值中添加jsx

Question

这是我的代码

const events = [
{
event_name: 'Movie Night',
event_image: 'https://drive.google.com/uc?id=?????????????????',
event_date: 'Feb 29',
event_day: 'Friday',
event_time: '6:30 PM – 9:30 PM',
event_description:
'In partnership with our Building, we present Movie Night!'
}
]

但我想在描述中添加样式，因此，在键的值中添加jsx，类似于

event_description: 'In partnership with our <span className="font-bold> "Building </span>, we present Movie Night!'

顺便说一句，我正在使用顺风

但我的语法不被接受，和我尝试过的其他语法都不被接受，如果有人能帮助我们如何做到这一点，我们将不胜感激！

Answer 1

为需要添加一些样式的情况编写一个内联组件。

对于您的情况，您可以执行以下操作。

const events = [
{
event_name: 'Movie Night',
event_image: 'https://drive.google.com/uc?id=?????????????????',
event_date: 'Feb 29',
event_day: 'Friday',
event_time: '6:30 PM – 9:30 PM',
event_description: () => (<>In partnership with our <span className='font-bold'>Building </span>, we present Movie Night!</>)
}
];

在渲染时，您可以执行类似的操作

return events[0].event_description()

您也可以使用dangerouslySetInnerHTML。但是，根据react官方文件，不建议使用。

插入带有React变量语句(JSX(的HTML

您也可以使用一些库，例如：html-react-parser