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!'

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

但是我的语法不被接受，我尝试过的其他语法也不能接受，如果有人可以帮助完成此操作，将不胜感激！

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官方文档，不建议这样做。

Insert HTML with React Variable Statements (JSX)

您还可以将一些库用于ex：html-react-parser

在键挂钩的值中添加jsx反应

1 个答案: