javascript - jsx中的条件输出HTML

Question

我正在尝试更改一些目前只是循环并输出 jsx 的 jsx，当我尝试根据数组对象中的值将循环更改为输出时，我在代码中遇到错误，因为它与我尝试的方式一样输出html。

数组中有一个名为 Group 的值，如果组名与上一个组名不同，则输出一个标签以显示新组名

我必须开始的是..

<Container className="float-left">
{ 
    this.Store.SearchResults.map( template =>                       
    <TemplateCard
        key={template.Name}
        ....
    >                       
    { template.Name }
    </TemplateCard>)                    
}
</Container>

我想做的是...

<Container className="float-left">
{ 
    this.Store.SearchResults.map( template =>
    {
            var lastGroup;
            if(template.Group !== lastGroup ){
                    // output group name
                    <div>
                    <Label>{template.Group}</Label>
                    </div>
            }
    }                   
    <TemplateCard
        key={template.Name}
        ....
    >                       
    { template.Name }
    </TemplateCard>)                    
}
</Container>

这给出了错误.. - 意外的令牌，预期的“，”

标签： javascriptreactjsjsx

Answer 1

您可以使用三元运算符，如果条件为真则呈现 div，否则呈现 null：

{template.Group !== lastGroup ?
    <div>
        <Label>{template.Group}</Label>
    </div>
: null}