在 React 中使用多行 javascript

Question

我有這個源代碼，在React function 組件中

return (
  result.map(item => (
    <tr key={item.id}>
      <td>
      {new Date(item.pub_date).getFullYear()} /
      {new Date(item.pub_date).getMonth()} /
      {new Date(item.pub_date).getDate()}
      </td>
    </tr>

但是在這個腳本中，它需要三個Date實例。

我想像這樣縮短。

var date = new Date(item.pub_date)
date.getFullYear() / date.getMonth() /date.getDate()

這是正確的想法嗎？ 還是在 JSX 中不可能做到這一點？

Answer 1

您可以通過使用模板文字和在返回 scope 之外設置日期變量以稍微不同的方式實現您想要的。

return (
  result.map(item => {
    const date = new Date(item.pub_date)

    return (
      <tr key={item.id}>
        <td>
        {`${date.getFullYear()} / ${date.getMonth()} / ${date.getDate()}`}
        </td>
      </tr>
    )
  })
)

Answer 2

您可以創建一個單獨的 function 用於格式化日期：

function getDate(dateValue){
     let date = new Date(dateValue);
     return `${date.getFullYear()} / ${date.getMonth()} / ${date.getDate()}`
    }

return (
  result.map(item => {
    return (
      <tr key={item.id}>
        <td>
        {getDate(item.pub_date)}
        </td>
      </tr>
    )
  })
)