Добавьте jsx в значение key hooks реагируют

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. Однако это не рекомендуется согласно официальным документам.

Вставка HTML с инструкциями переменных реагирования (JSX)

Вы также можете использовать некоторые библиотеки, например: html-react-parser