Css 在贴图内部使用三元运算符，我想使用它来更改材质表的列宽

我正试图根据从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>

{
tableData.header.map（header=>{
header.id==“名称”？
(
{
标题.title
}
)
:
(
{
标题.title
}
)
})
}

但我在这一行中遇到了一个错误：

header.id==“名称”

显示的错误是：“应为赋值或函数调用，而不是看到表达式没有未使用的表达式”

我哪里做错了

---

在这两种情况下，我都尝试过在TableCell之前添加return，因为它会给出一个错误。

如果函数要返回值，则带有主体的箭头函数可能需要显式的return语句。没有主体的箭头函数（即no

{}

）具有隐式返回

解决方案 返回整个三元表达式

<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>

---

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

<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>

{
tableData.header.map（header=>header.id==“name”？
{
标题.title
}
:
{
标题.title
}
)
}

---

我基本上去掉了一些大括号，不知怎么地找到了解决办法。

我尝试在TableCell之前添加return，但它给出了一个错误。顺便说一句，我是新来的。我喜欢第二种解决方案。我以前确实试过，但出现了语法错误。这样做的原因是因为在指定宽度之前，我首先检查了样式内部的条件。谢谢你提供了这两个详细的解决方案，但我最终自己解决了：）@Amit是的，你似乎无意中发现了隐含的回报。干杯

<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>