Javascript react中三值算子的条件绘制
我试图有条件地在我的页面上呈现一些消息。下面是我实际场景的简化代码Javascript react中三值算子的条件绘制,javascript,reactjs,Javascript,Reactjs,我试图有条件地在我的页面上呈现一些消息。下面是我实际场景的简化代码 <div> { isCondition1 == true ? 'Show issue list' : isConditionA == true? 'Show message for condition A' : 'Show error messag
<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>