Javascript react中三值算子的条件绘制

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

<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>

并按如下方式使用：

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

{
isCondition1==真？
“显示问题列表”
:
{msgNoIssues}
}
{
isCondition2==真？
“显示团队问题列表”
:
{msgNoIssues}
}

但它给出了一个错误信息：

对象作为React子对象无效（找到：具有键的对象 {msgNoIssues}）。如果要渲染子对象集合，请使用 改为使用数组或使用中的createFragment（object）包装对象 React附加组件

不使用react附加组件可以实现吗？有没有更好的办法

JSX中何时需要{}

我们需要使用

{}

将js表达式放在JSX中，因此将三元运算符放在

{}

中

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

{msgNoIssues}

的意思是

{msgNoIssues:msgNoIssues}

，这意味着您试图使用键

msgNoIssues

呈现对象，这就是它抛出错误的原因：对象作为React子对象无效（找到：具有键{msgNoIssues}的对象）

解决方案：

删除

msgNoIssues

周围的

{}

，如下所示：

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

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