在地图中使用三元运算符，我想使用它来更改 material table 的列宽

Question

我正在尝试根据从地图函数收到的 ID 更改列宽。这是代码：

<TableRow>
                        {
                            tableData.header.map(header => {
                                header.id === "name" ? 
                                (<TableCell style={{width: 100}} align="center" key={header.id}>
                                    {
                                        header.title
                                    }
                                </TableCell>)
                                :
                                (<TableCell style={{minWidth: 185}} align="center" key={header.id}>
                                    {
                                        header.title
                                    }
                                </TableCell>)
                            })
                        }
</TableRow>

但是我在这一行遇到错误：

header.id === “姓名” ?

显示的错误是：“应为赋值或函数调用，但看到的是表达式 no-unused-expressions”

我哪里错了？

我试过在两种情况下都在 TableCell 之前添加 return 位，但它给出了一个错误。

Answer 1

带主体的箭头函数可能需要显式 return 语句，如果函数是 return一个值。没有主体的箭头函数（即没有 {}）有一个 implicit return.

解决方案

Return整个三元表达式。

<TableRow>
  {tableData.header.map((header) => {
    return header.id === "name" ? ( // <-- return entire ternary expression
      <TableCell style={{ width: 100 }} align="center" key={header.id}>
        {header.title}
      </TableCell>
    ) : (
      <TableCell style={{ minWidth: 185 }} align="center" key={header.id}>
        {header.title}
      </TableCell>
    );
  })}
</TableRow>

这仍然是很多重复的代码，它可以更DRY。将三元转移到最少量代码的分支逻辑。我看到的唯一差异是 width 值，所以在那里分支。

<TableRow>
  {tableData.header.map((header) => {
    return (
      <TableCell
        style={{ width: header.id === "name" ? 100 : 185 }}
        align="center"
        key={header.id}
      >
        {header.title}
      </TableCell>
    );
  })}
</TableRow>

Answer 2

所以我用这段代码解决了这个问题：

<TableRow>
                        {
                            tableData.header.map(header => header.id === "name" ? 
                                <TableCell style={{minWidth: 80}} align="center" key={header.id}>
                                    {
                                        header.title
                                    }
                                </TableCell>
                                :
                                <TableCell style={{minWidth: 185}} align="center" key={header.id}>
                                    {
                                        header.title
                                    }
                                </TableCell>
                            )
                        }
</TableRow>

我基本上删除了一些花括号并以某种方式得到了解决方案。

在地图中使用三元运算符，我想使用它来更改 material table 的列宽

Using ternary operator inside map using which I want to change column width of material table

css

reactjs

material-ui

material-table

解决方案