如何在 jsx 中使用三元运算符？答案

【问题标题】：How to use ternary operator for the jsx?如何在 jsx 中使用三元运算符？
【发布时间】：2020-05-10 19:41:39
【问题描述】：

您好，我想使用三元运算符来渲染 jsx。

我想做什么？我必须根据某些条件来渲染两个组件，即 ParentComponent 和 ChildComponent。

当 variable_1 和 variable_2 为真时，应渲染父组件。当 variable_1 为 true 且 variable_2 为 false 时，应渲染 ChildComponent。

下面我试过了，

render = () => {
    return (
        {variable_2
            ? <ParentComponent/>
            : <ChildComponent/>
        }
    )
}

在上面的代码中，我只包含了 variable_2。我如何也使用三元运算符检查 variable_1。

有人可以帮我解决这个问题吗？谢谢。

【问题讨论】：

条件运算符和 JSX 没有什么特别之处。使用它的方式与将它用于任何其他类型的值相同：return variable_2 && variable_1 ? <ParentComponent/> : (variable_1 ? <ChildComponent/> : null); 外部 { 表示错误的对象字面量的开头。只写两个if 语句可能更容易理解。

标签： reactjs

【解决方案1】：

我会创建一个函数并将逻辑放入其中。三元组可能很难阅读，尤其是当您开始嵌套它们时。最好明确表达你的意图，这样当你在一个月左右回来时，你仍然可以看到它在做什么。

const renderContent = () => {
  if (var1 && var2) return <ParentComponent/>
  if (var1 && !var2) return <ChildComponent/>
  return null
}

return renderContent()

【讨论】：

【解决方案2】：

要求可以简化为：

当 variable_1 为真时

如果 variable_2 也是 true，则显示 'parent'

如果 variable_2 为 false，则显示 'child'

当 variable_1 为假时，

无论variable_2的值如何，都显示空格

使用三元运算符实现：

return(
    variable_1
        ? (variable_2 ? <ParentComponent /> : <ChildComponent />)
        : null
)

【讨论】：

【解决方案3】：

这个问题更像是一个三元运算符问题而不是一个反应问题。假设A是父组件，B是子组件

const output = variable_1 && variable_2 ? A
                   : variable_1 && !variable_2 ?
                         B : null;

我之所以调用 null 是因为您没有提供其他情况，例如 var1 为假而 var2 为真，或者两者都为假时

【讨论】：

【解决方案4】：

您需要通过下面给出的更新代码：

render = () => { return ( { variable_1 && variable_2 ? <ParentComponent /> : variable_1 ? <ChildComponent /> : null } ) }

【讨论】：