Я хочу заполнить диалоговое окно данными из файла .json . Вот один элемент данных, который предоставляется.

  { "type": "GP", "properties": { //other information "DR_NAME": "Dr Philips", "ALL_OPENING_HOURS": [ { "day_string": "Monday - Thursday", "opening_hours": [ "8.30AM – 12.30PM", "2.00PM – 4.30PM", "6.30PM – 9.00PM" ] }, { "day_string": "Friday", "opening_hours": [ "8.30AM – 12.30PM", "2.00PM – 4.30PM" ] }, { "day_string": "Saturday {amp}amp; Sunday", "opening_hours": [ "8.30AM – 12.30PM" ] }, { "day_string": "Public Holiday", "opening_hours": [ "Closed" ] } ], "FILE_NAME": "Slide1" }, "geometry": { "type": "Point", "coordinates": [ 103.77076830515, 1.38358044593591, 0 ] } } 

В настоящее время я пишу ReactApp, и я научился писать код JS, завернутый в элементы HTML. Я намеревался поставить новую строку / разрыв строки после каждой пары day_string-opening_hours , чтобы окончательный сгенерированный HTML day_string-opening_hours был следующим

Ожидаемый результат

 Opening Hours: Monday - Thursday: 8.30AM – 12.30PM, 2.00PM – 4.30PM, 6.30PM – 9.00PM, Friday: 8.30AM – 12.30PM, 2.00PM – 4.30PM, Saturday {amp}amp; Sunday: 8.30AM – 12.30PM, Public Holiday: Closed 

Однако это решение не работает и по-прежнему показывает, что каждый day_string-opening_hours последовательно day_string-opening_hours друг с другом

Фактический вывод:

Opening Hours:Monday - Thursday: 8.30AM – 12.30PM, 2.00PM – 4.30PM, 6.30PM – 9.00PM, Friday: 8.30AM – 12.30PM, 2.00PM – 4.30PM, Saturday {amp}amp; Sunday: 8.30AM – 12.30PM, Public Holiday: Closed

Я подумываю о вставке пары {amp}lt;br /{amp}gt; после пары, но я не уверен, как написать HTML-код, завернутый в JS, даже после того, как увидел это решение . Кто-нибудь знает решение моей проблемы? Вот соответствующий фрагмент кода.

 {amp}lt;Dialog open={open} onClose={handleToggle}{amp}gt; {amp}lt;DialogContent{amp}gt; //other information {amp}lt;hr /{amp}gt; Opening Hours: {clinic.properties.ALL_OPENING_HOURS.map(period ={amp}gt; ( period.day_string ":n" period.opening_hours.join(",n") )) .join(", n")} {amp}lt;hr /{amp}gt; //other information {amp}lt;/DialogContent{amp}gt; {amp}lt;/Dialog{amp}gt; 

Обновление 1

 {amp}lt;Dialog open={open} onClose={handleToggle}{amp}gt; {amp}lt;DialogContent{amp}gt; //other information {amp}lt;hr /{amp}gt; {amp}lt;p{amp}gt;Opening Hours:{amp}lt;/p{amp}gt; {clinic.properties.ALL_OPENING_HOURS.map(period ={amp}gt; ( {amp}lt;p{amp}gt; {period.day_string ":"}{amp}lt;br /{amp}gt;{period.opening_hours.join(", ")} {amp}lt;/p{amp}gt; )) .join(", n")} {amp}lt;hr /{amp}gt; //other information {amp}lt;/DialogContent{amp}gt; {amp}lt;/Dialog{amp}gt; 

React преобразует текст, который вы отображаете, текст, который вы отображаете с помощью функции стрелки, в HTML-элементы. Как и в html, если вы просто пишете текст в несколько строк без разрывов строк ( {amp}lt;br/{amp}gt; ), он будет восприниматься как одна строка.

Лучшее решение для вас — это заделка текста тегами абзаца.

 {amp}lt;Dialog open={open} onClose={handleToggle}{amp}gt; {amp}lt;DialogContent{amp}gt; //other information {amp}lt;hr /{amp}gt; {amp}lt;p{amp}gt;Opening Hours:{amp}lt;/p{amp}gt; {clinic.properties.ALL_OPENING_HOURS.map(period ={amp}gt; ( {amp}lt;p{amp}gt; {period.day_string} : {amp}lt;br /{amp}gt; {period.opening_hours.join(", ")} {amp}lt;/p{amp}gt; ))} {amp}lt;hr /{amp}gt; //other information {amp}lt;/DialogContent{amp}gt; {amp}lt;/Dialog{amp}gt; 

Вот ссылка на рабочий стек-блиц — нажмите здесь

Редактировать непогрешимый звук-ss2dk

Попробуй это.

Вы можете достичь того, что вы хотите, без разрыва HTML-тега.

 return ( {amp}lt;div{amp}gt; {amp}lt;h3{amp}gt;Openning Hours{amp}lt;/h3{amp}gt; {clinic.properties.ALL_OPENING_HOURS.map(({day_string,opening_hours}) ={amp}gt; ( {amp}lt;p key={Math.random()*10000}{amp}gt; {amp}lt;div{amp}gt;{day_string}{amp}lt;/div{amp}gt; {amp}lt;div{amp}gt;{opening_hours.join(', ')}{amp}lt;/div{amp}gt; {amp}lt;/p{amp}gt; ))} {amp}lt;/div{amp}gt; );