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

Question

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

我有数据，但是我正在为JSX语法苦苦挣扎。我来自Java世界，因此JSX对我来说是新手，在渲染时我很难解决一些语法和要求。我以前使用过服务器端模板，因此这应该很容易，但是我发现这很困难。

我知道JSX不喜欢地图中的if语句。我已经看到使用三元运算符（？）的建议，但是我没有if / else场景，只有if。有人可以帮助我达到预期的结果并向我解释一些JSX吗？

这里是桌子的外观（向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

一些注意点

• 如果您在{}（=>）之后有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>
      </>
    )
  )}
/>