Javascript 插入<；br/>；在JS迭代中

我想用

.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 & 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，我学会了编写用HTML元素包装的JS代码。我打算在每对

日字符串开始时间
后添加一个新行/换行符，以便生成的最终HTML如下所示

预期产出

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 & Sunday: 
8.30AM – 12.30PM, 

Public Holiday: 
Closed

但是，此解决方案不起作用，仍然显示每个
日\u字符串开始时间\u小时
连续连接在一起

实际输出：

开放时间：周一至周四：上午8:30–下午12:30，下午2:00–下午4:30，下午6:30–晚上9:00，周五：上午8:30–下午12:30，下午2:00–下午4:30，周六和周日：上午8:30–下午12:30，公共假日：关闭

我正在考虑在pair之后插入一个

，但我不确定如何编写用JS包装的HTML代码，即使看到这一点。有人知道我问题的解决办法吗？下面是相关的代码片段

<Dialog open={open} onClose={handleToggle}>
  <DialogContent>
    //other information

    <hr />
    Opening Hours:
    {clinic.properties.ALL_OPENING_HOURS.map(period => (
      period.day_string+":\n"+period.opening_hours.join(",\n")
    ))
    .join(", \n")}
    <hr />

    //other information
  </DialogContent>
</Dialog>


//其他资料

开放时间：
{clinic.properties.ALL_OPENING_HOURS.map（period=>(
period.day\u字符串+“：\n”+period.opening\u hours.join（“，\n”）
))
.join（“，\n”）}

//其他资料

更新1

<Dialog open={open} onClose={handleToggle}>
  <DialogContent>
    //other information

    <hr />
        <p>Opening Hours:</p>

        {clinic.properties.ALL_OPENING_HOURS.map(period => (
          <p>
          {period.day_string+":"}<br />{period.opening_hours.join(", ")}
          </p>
        ))
        .join(", \n")}
    <hr />

    //other information
  </DialogContent>
</Dialog>


//其他资料

开放时间：

{clinic.properties.ALL_OPENING_HOURS.map（period=>(

{period.day_string+“：”}
{period.opening_hours.join（“，”}

))
.join（“，\n”）}

//其他资料
React将呈现的文本转换为通过箭头函数映射到html元素的文本。就像在html中一样，如果你只写几行没有换行符的文本（

），它将把它们作为单行

在这里，最好的解决方案是用段落标记覆盖文本

<Dialog open={open} onClose={handleToggle}>
  <DialogContent>
    //other information

    <hr />
    <p>Opening Hours:</p>
    {clinic.properties.ALL_OPENING_HOURS.map(period => (
      <p>
        {period.day_string} :
        <br />
        {period.opening_hours.join(", ")}
      </p>
    ))}
    <hr />

    //other information
  </DialogContent>
</Dialog>


//其他资料

开放时间：

{clinic.properties.ALL_OPENING_HOURS.map（period=>(

{period.day_string}：


{期间.营业时间.加入（“，”）

))}

//其他资料

以下是stackblitz工作的链接-

React将呈现的文本转换为通过箭头函数映射到html元素的文本。就像在html中一样，如果你只写几行没有换行符的文本（

），它将把它们作为单行

在这里，最好的解决方案是用段落标记覆盖文本

<Dialog open={open} onClose={handleToggle}>
  <DialogContent>
    //other information

    <hr />
    <p>Opening Hours:</p>
    {clinic.properties.ALL_OPENING_HOURS.map(period => (
      <p>
        {period.day_string} :
        <br />
        {period.opening_hours.join(", ")}
      </p>
    ))}
    <hr />

    //other information
  </DialogContent>
</Dialog>


//其他资料

开放时间：

{clinic.properties.ALL_OPENING_HOURS.map（period=>(

{period.day_string}：


{期间.营业时间.加入（“，”）

))}

//其他资料

以下是stackblitz工作的链接-

试试这个

您可以在不破坏html标记的情况下实现您想要的

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

返回(
开放时间
{clinic.properties.ALL_OPENING_HOURS.map（{day_string，OPENING_HOURS}）=>(

{day_string}
{营业时间.加入（'，'）}

))}
);
试试这个

您可以在不破坏html标记的情况下实现您想要的

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

返回(
开放时间
{clinic.properties.ALL_OPENING_HOURS.map（{day_string，OPENING_HOURS}）=>(

{day_string}
{营业时间.加入（'，'）}

))}
);
我已尝试根据我的代码调整您的解决方案。但是它不起作用，实际输出变为
[object object]，[object object]，[object object]
请现在检查，我已尝试根据我的代码调整您的解决方案。但是它不起作用，实际输出变为
[object object]，[object object]，[object object]
请立即检查