Javascript jsx返回语句中的条件

这是一个全新的反应，我相信这很容易，但我正试图改变这一点：

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

返回值.map（值=>{
if（head）返回{value}；
返回{value}
});

转换为单个返回语句

基本上是一种条件检查，它将

标记替换为

。在vanilla中，我只返回一个模板字符串，但我似乎无法将其用于jsx。（类似这样的内容）

${value}

我觉得我很接近了，但我显然是在回应字符串：：耸耸肩：：

感谢您的帮助

谢谢

我愿意

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

返回值.map（值=>{
返回头？{value}：
{value}
});

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

我会这样做

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

返回值.map（值=>{
返回头？{value}：
{value}
});

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

尝试以下方法：

返回值.map（值=>{
const Tag=`h${head'th'：'td'}`；
返回{value}
});

试试这个：

返回值.map（值=>{
const Tag=`h${head'th'：'td'}`；
返回{value}
});

是的，我想这只是困扰我，我似乎能“想出如何替换语句的一部分，但是谢谢：）不客气，请注意编辑代码结构的答案。是的，我想这只是困扰我，我似乎能“想出如何替换语句的一部分，但是谢谢：）不客气，请注意对代码结构答案的编辑。是的，谢谢-我尝试过搜索，但没有想到将其称为动态标记。奇怪的是它不可能，谢谢-我确实尝试过搜索，但没有想到称之为动态标签。奇怪的是，这不可能发生！当然喜欢这种方法，尽管它不是一个单独的行，但我将标志更改为字符串，并尝试将其直接作为标记本身，即：

{value}

，但它只在与大写字母一起分配时起作用。不太清楚为什么？这是React的约定：大写=函数/组件，否则是html元素。谢谢！当然喜欢这种方法，尽管它不是一个单独的行，但我将标志更改为字符串，并尝试将其直接作为标记本身，即：

{value}

，但它只在与大写字母一起分配时起作用。不太清楚为什么？这是React的约定：大写=函数/组件，否则它是html元素。