时间戳

首页 > 解决方案 > 在反应javascript中混合material-ui元素和代码的问题

javascript - 在反应javascript中混合material-ui元素和代码的问题

问题描述

我在尝试在 react jsx 代码中使用代码和 material-ui 元素时经常遇到问题。这是一个代码片段：

const icols = 0;
const makeTableRow = (
  x,
  i,
  formColumns,
  handleRemove,
  handleSelect) =>
  <TableRow key={`tr-${i}`}>
    {formColumns.map((y, k) => (
      y.displayColumn ? (<TableCell key={`trc-${k}`}>{x[y.name]}</TableCell>) : null), <-comma added for next line
      y.displayColumn ? (cols+=1) : null)
    )}
    <TableCell>
      <IconButton onClick={() => handleSelect(i)} ><EditIcon fontSize='small'/></IconButton>
      <IconButton onClick={() => handleRemove(i)} ><DeleteForeverIcon fontSize='small' /></IconButton>
    </TableCell>
  </TableRow>

当我在上面添加这一行时，出现 jsx 解析错误：

      y.displayColumn ? (cols+=1) : null)

如果我删除上面 EOL 处的逗号，我仍然会收到错误消息。基本上我不能得到一张地图来执行多个语句。

如果我取出该行和它上面的 EOL 逗号，一切正常，但我没有得到我需要的显示列数。

我尝试过使用我更熟悉的简单 if/else，但我从来没有能够让 if/else 在 jsx 函数中工作。我只想为将 displayColumn 标志设置为 true 的列创建一个表格单元，并且我想要显示的列的总数，以便以后可以使用它（cols）。

有没有办法用 if/else 语句来完成这个？然后我可以在 if 子句中有超过 1 个语句。三元运算符只允许 1 条语句，我在任何地方都找不到地图的限制。

在此先感谢您的帮助！

标签： javascriptreactjsmaterial-ui

解决方案

你可以做这样的事情。您可以在 map 中打开打开箭头函数体并放入 return JSX 并在cols那里进行增量。我们可以只使用一个条件语句，而不是让两个三元运算符检查相同的条件。

<TableRow key={`tr-${i}`}>
  {
    formColumns.map((y, k) => {
      if (y.displayColumn) {
        cols += 1;
        return <TableCell key={`trc-${k}`}>{x[y.name]}</TableCell>
      }
      return null
    })
  }
  <TableCell>
    <IconButton onClick={() => handleSelect(i)} ><EditIcon fontSize='small'/></IconButton>
    <IconButton onClick={() => handleRemove(i)} ><DeleteForeverIcon fontSize='small' /></IconButton>
  </TableCell>
</TableRow>

推荐阅读