时间戳

首页 > 解决方案 > jsx return 语句中的条件

javascript - jsx return 语句中的条件

问题描述

React 很新，我相信这很容易，但我正在尝试转换它：

    return values.map(value => {
        if(head) return <th key={uuidv4()}> {value} </th>;
        return <td key={uuidv4()}> {value} </td>
    });

到单个返回语句中。

基本上是一个条件检查，<th>用<td>. 在香草中，我只返回一个模板字符串，但我似乎无法让它与 jsx 一起使用。（像这样的东西）<${head? 'th': 'td'} key=${uuidv4()}>${value}</${head? 'th': 'td'}>

我觉得我很接近了，但我显然返回了一个字符串 ::shrug::

任何帮助表示赞赏，

谢谢

标签： javascriptreactjsjsx

解决方案

我会做

return values.map(value => {
    return head ? <th key={uuidv4()}> {value} </th> :
                  <td key={uuidv4()}> {value} </td>
});

重要的是要说：在我看来，2 个选项（td 或 th）中代码的“重复”很棒！因为这是您拥有的两种不同类型的 UI 功能。最好将它们分开，并且可以单独对它们中的每一个进行更改。

推荐阅读