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

Posted 2023-02-21

【中文标题】jsx返回语句中的条件[重复]

【英文标题】：Conditional in jsx return statement [duplicate]

【发布时间】：2021-05-10 18:52:45

【问题描述】：

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

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

到单个返回语句中。

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

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

任何帮助表示赞赏，

谢谢

【问题讨论】：

是的，谢谢 - 我确实尝试过搜索，但没有想到将其称为动态标签。奇怪，这是不可能的

【参考方案1】：

试试这个：

return values.map(value => 
  const Tag = `h$head ? 'th' : 'td'`;
  return <Tag key=uuidv4()>value</Tag>
);

【讨论】：

谢谢！绝对喜欢这种方法，即使它不是单行

出于兴趣 - 我将标志更改为字符串并尝试将其直接作为标签本身，即：<tag key=uuidv4()>value</tag> - 但它仅在您指定大写字母时才有效完毕。不太清楚为什么？

这是 React 的约定：大写 = 函数/组件，否则它是一个 html 元素。

【参考方案2】：

我愿意

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

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

【讨论】：

是的，我想这只是困扰我，我似乎无法弄清楚如何替换部分语句，但是谢谢 :)

不客气，请注意关于代码结构的答案的编辑。