在ReactJS迭代中插入

debugcn 发表于 Dev

Prashin Jeevaganth

我想用.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代码。我打算在每对之后放置一个新的换行/换行符day_string-opening_hours，以便最终生成的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

但是，此解决方案无效，并且仍然显示每个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 & Sunday: 8.30AM – 12.30PM, Public Holiday: Closed

我正在考虑 改为插入一个after对，但是即使看到此解决方案，我也不确定如何编写用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>

更新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>

Sachith Rukshan

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>

这是有效的stackblitz链接-单击此处