jsx返回语句中的条件[重复]

Question

相当新的反应，我相信这很容易，但我正在尝试转换：

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

转换成单个返回语句。

基本上是替换

我觉得我很接近了，但我显然::耸耸肩::

感谢您的帮助，

谢啦




Answer 1

我愿意

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

重要的是说： 2个选项（td或th）中代码的“重复”在我看来很棒！因为这是两种不同类型的用户界面功能。最好将它们分开，并保持可能将更改单独放在其中。

Answer 2

试试这个：

js prettyprint-override">return values.map(value => {
  const Tag = `h${head ? 'th' : 'td'}`;
  return <Tag key={uuidv4()}>{value}</Tag>
});