在映射中使用三元运算符，我想用它来改变材料表的列宽

Question

我正试图根据从map函数接收到的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==="；name"？

所示的错误是：；应为赋值或函数调用，但却看到一个表达式没有未使用的表达式"；

我哪里错了？

我试过在TableCell之前添加return，在这两种情况下，它都会出错。

Answer 1

如果函数要返回值，则带正文的箭头函数可能需要显式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>

这仍然是很多重复的代码，可能会更为严重。在最少的代码量上将三进制移到分支逻辑。我看到的唯一差异是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>

我基本上去掉了一些花括号，不知怎么得到了解决方案。