ReactJs 卡头中的三元运算符答案

【问题标题】：Ternary Operator in ReactJs Card HeaderReactJs 卡头中的三元运算符
【发布时间】：2020-10-07 22:07:39
【问题描述】：

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

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

【问题讨论】：

标签： javascript reactjs ecmascript-6 conditional-operator react-material

【解决方案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 || ''}`} />;

【讨论】：