ReactJs 卡头中的三元运算符

Posted 2023-02-22

【中文标题】ReactJs 卡头中的三元运算符

【英文标题】：Ternary Operator in ReactJs Card Header

【发布时间】：2020-10-07 22:07:39

【问题描述】：

如何在 ReactJS 的 CardHeader 标题中添加三元运算符？我只能放一个名字而不是姓氏。

<CardHeader title=(firstName ? firstName : "")(lastName ? lastName : "") />;

【参考方案1】：

你可以在同一个字符串中使用多个三元运算符：

<CardHeader title=`$(firstName ? firstName : "") $(lastName ? lastName : "")` />

在你的情况下，我会使用一个函数来生成全名：

const getFullName = () => 
    const name = []
    if(firstName) name.push(firstName)
    if(lastName) name.push(lastName)
    return name.join(' ')

// ...
<CardHeader title=getFullName() />

【讨论】：

我不明白为什么要投反对票。答案是正确的，而且效果很好。

我没有对你投反对票。我不知道谁对你投了反对票

【参考方案2】：

也许你可以尝试做类似的事情。

<CardHeader title=`$firstName || '' $lastName || ''` />;