1

我想用文件中的数据填充一个对话框.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

我正在考虑插入一个<br />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>
4

2 回答 2

0

React 将您呈现的文本转换为通过箭头函数映射的文本为 html 元素。与在 html 中一样，如果您只是在没有换行符的情况下将文本分成几行（<br/>），它将把它们当作单行。

最好的解决方案是用段落标签覆盖文本。

<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 的链接 -点击这里

编辑 infallible-sound-ss2dk

于 2019-12-26T02:44:51.107 回答
0

试试这个。

您可以在不中断 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>
    );
于 2019-12-26T03:16:09.437 回答