Реагировать - разделить JSX на новую строку, только на маленьком экране

#reactjs #tailwind-css

#reactjs #попутный ветер-css

Вопрос:

Я хочу отобразить строку текста, которая переходит в новую строку, но только на экране небольшого размера, в React.

Моя конечная цель — чтобы этот подтекст выглядел примерно так, как Available: 4-9PM на экране среднего размера или выше, но на маленьком экране:

 Available:
4-9PM

Обычно я использую tailwind для встроенного стиля CSS, поэтому обычно я бы использовал className='hidden md:block' on div , чтобы скрыть элемент, но показать определенный размер, однако я не уверен, как включить это с помощью разрыва строки. Я попытался добавить ${<br />} к переменной subtext, но это просто добавило [object OBJECT] к подтексту. Мысли? Я включил соответствующие фрагменты ниже.

 const options = servicePeriod => {
   const startTime = servicePeriod.startTime
   const endTime = serviceperiod.endTime
   subtext = `Available ${startTime}-${endTime}`

   return [
     {
       subtext: subtext
     }
   ]
}

return (
   <div>
      <OptionGroup
         options={options(servicePeriod)}
      />
   </div>

)

Ответ №1:

Возврат строки может не соответствовать нашим требованиям, поэтому вместо этого нам нужно вернуть < div>

 const options = servicePeriod => {
  const startTime = servicePeriod.startTime
  const endTime = serviceperiod.endTime
  subtext = `<div>
                <div className="inline-grid">Available:</div><div className="inline-grid">${startTime}-${endTime}</div>
            </div>`

  return [{
    subtext: subtext
  }]
}

 .inline-grid {
  display: inline-grid;
}