在反应中使用三元运算符进行条件渲染

【问题标题】：Conditional rendering with ternary operator in react在反应中使用三元运算符进行条件渲染
【发布时间】：2017-08-22 10:29:58
【问题描述】：

我正在尝试有条件地在我的页面上呈现一些消息。以下是我的实际场景的简化代码。

<div>
    {
        isCondition1 == true ?
           'Show issue list'
        :
            isConditionA == true?
               'Show message for condition A'
            :
                'Show error message'
    }
</div>
<div>
    {
        isCondition2 == true?
           'Show team issue list'
        :
            isConditionA == true?
               'Show message for condition A'
            :
               'Show error message'
    }
</div>

我想把上面的常用的东西拿出来，用在代码中。

const msgNoIssues = (
    isConditionA == true?
       'Show message for condition A'
    :
       'Show error message'
);

并按如下方式使用：

<div>
    {
        isCondition1 == true?
           'Show issue list'
        :
           {msgNoIssues}
    }
</div>
<div>
    {
        isCondition2 == true ?
           'Show team issue list'
        :
           {msgNoIssues}
    }
</div>

但它给出了错误消息：

对象作为 React 子对象无效（找到：带键的对象 {msgNoIssues}）。如果您打算渲染一组孩子，请使用一个数组，或者使用 createFragment(object) 从 React 插件。

没有react插件可以实现吗？有没有更好的办法？

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

在 JSX 中什么时候需要 {}？

我们需要用{}把js表达式放到JSX里面，所以把三元运算符放到{}里面。

此错误的原因：对象作为 React 子对象无效

{ msgNoIssues } 的含义是{ msgNoIssues: msgNoIssues }，这意味着您正在尝试使用键 msgNoIssues 渲染对象，这就是它抛出错误的原因：对象作为 React 子对象无效（发现：对象与键 { msgNoIssues}）。

解决方案：

去掉msgNoIssues周围的{}，这样写：

<div>
    {
        isCondition1 == true ?
            'Show issue list'
        :
            msgNoIssues
    }
</div>
<div>
    {
        isCondition2 == true ?
            'Show team issue list'
        :
            msgNoIssues
    }
</div>

检查此片段（{ a } 的含义）：

let a = 10;

let obj = {a};

console.log('obj = ', obj);

查看文档：Embedding Expressions in JSX 和 Conditional Rendering

【讨论】：