如何动态地将数据添加到 table 到 map/if 或 JSX 中的三元运算符

Question

我正在使用 material-ui/react tables，我需要用我的网络 API 中的一些动态数据替换一些静态 table 数据。

我有数据，但我正在努力使用 JSX 语法。我来自 Java 世界，所以 JSX 对我来说是新手，我很难理解渲染时的一些语法和要求。我以前使用过服务器端模板，所以这应该很容易，但我发现它非常困难。

我知道 JSX 不喜欢映射中的 if 语句。我看过使用三元运算符 (?) 的建议，但我没有 if/else 场景，只有 if。有人可以帮助我实现我想要的结果并向我解释一些 JSX 吗？

这是 table 之前的样子（感谢 creative-tim）：

<Table
  tableData={[
    [
      <img src={us_flag} alt="us_flag" key={"flag"} />,
      "USA",
      "2.920",
      "53.23%"
    ],
    ...
    [
      <img src={ro_flag} alt="us_flag" key={"flag"} />,
      "Romania",
      "600",
      "5.94%"
    ],
    [
      <img src={br_flag} alt="us_flag" key={"flag"} />,
      "Brasil",
      "550",
      "4.34%"
    ]
  ]}
/>

这是我试图用以下内容替换它但无济于事的内容：

<Table tableData={
  {evtCounts.map(function (evtCount) {
    {sites.map(function (site) {
      if (site.IDX == evtCount.SiteID) {
        return ([{site.Name}, {evtCount.Percentage}]);
      }
    })}
  })}
}/>

尽管存在明显的格式问题（缺少外部方括号集），但我无法编译它。出于某种原因，JSX 不喜欢我的 map 语句。它一直告诉我：

        ./src/views/Dashboard/Dashboard.js
      Line 197:31:  Parsing error: Unexpected token, expected ","

      195 |                 <GridItem xs={12} sm={12} md={5}>
      196 |                   <Table tableData={
    > 197 |                     {evtCounts.map(function (evtCount) {
          |                               ^
      198 |                       {sites.map(function (site) {
      199 |                         if (site.IDX == evtCount.SiteID) {
      200 |                           return ([{site.Name}, {evtCount.Percentage}]);

Answer 1

一些注意事项

地图需要一个 return 如果你在 => (arrow function)

{}

你可以用 && 换取 conditional rendering
<></> 是一个 react.fragment
tableData道具需要什么内容可以查看官方文档

以下是正常情况下的小样本

<Table tableData={
  evtCounts.map(evtCount => 
    sites.map(site =>
      site.IDX === evtCount.SiteID &&
      <>
        <p>{site.Name}</p>
        <p>{evtCount.Percentage}</p>
      </>
    )
  )}
/>

如何动态地将数据添加到 table 到 map/if 或 JSX 中的三元运算符

How to dynamically add data to a table via map/if or terinary operator in JSX

jsx

reactjs

material-ui

react-table