如何使用javascript向三元运算符添加部分代码并做出反应？答案

【问题标题】：How to add a part of code to the ternary operator using javascript and react?如何使用javascript向三元运算符添加部分代码并做出反应？
【发布时间】：2021-10-15 10:33:11
【问题描述】：

我有如下代码，

const variableType = 'INTEGER';
const editedValue = 100;
const defaultValue = 4;
return (
    isOpen ? (
        <span>something</span>
    ) : (
        <>
            {(variableType ?? '').toUpperCase() === 'BOOLEAN'
                ? capitalize(editedValue ?? '')
                : {editedValue}
        </>
    );

现在我要添加的是，当这个 variableType 不是布尔值并且editedValue 与 defaultValue 不同时，我想显示一个 icon 以及editedValue

如果 variableType 不是布尔值并且编辑的值与 defaultValue 相同，我只想显示editedValue。

我尝试过类似的方法，

return (
    isOpen ? (
        <span>something</span>
    ) : (
        <>
            {(variableType ?? '').toUpperCase() === 'BOOLEAN'
                ? capitalize(editedValue ?? '')
                : {editedValue !== defaultValue && (
                    <Icon />
                  }
                  {editedValue}
        </>
    );

但上面的语法似乎不正确。

如何更改上述三元运算符以满足上述条件并显示图标。有人可以帮我解决这个问题。我是使用三元运算符的新手。谢谢。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

这里的关键是了解 JSX 元素中有哪些部分，哪些不是。当你在一个元素或片段中时，你就在一个 JSX 元素中并且你使用{...} 来插入值或代码。当您在 {...} 中时，您不在在 JSX 表达式中。

我想你可能想要：

return (
    isOpen ? (
        <span>something</span>
    ) : (
        (variableType ?? '').toUpperCase() === 'BOOLEAN'
            ? capitalize(editedValue ?? '')
            : <>
                {editedValue !== defaultValue && <Icon />}
                {editedValue}
              </>
    );

....但我建议您将其拆分以使其更易于阅读和维护。例如：

if (isOpen) {
    return <span>something</span>;
}
if ((variableType ?? '').toUpperCase() === 'BOOLEAN') {
    return capitalize(editedValue ?? '');
}
return <>
    {editedValue !== defaultValue && <Icon />}
    {editedValue}
</>;

【讨论】：

【解决方案2】：

  if (isOpen) return <span>something</span>

  return (
    <>
      {(variableType ?? '').toUpperCase() === 'BOOLEAN'
        ? capitalize(editedValue ?? '')
        : <>
          {editedValue !== defaultValue && <Icon />}
          {editedValue}
        </>
      }
    </>
  )

【讨论】：