jsx中的条件输出HTML

2024-04-29 • 问答

我正在尝试更改当前循环并输出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>

这会导致错误。--意外令牌，预期为“，”

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

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

您的代码有很多问题。不确定是否需要在使用案例中使用map两次，但是由于.map()应该返回一个元素，因此您应该将整个内容包装在React Fragment中，并像-

一样使用

this.Store.SearchResults.map( (template,index) =>
        {
            var lastGroup; // Make sure to initialize it with some value
            return (
             <React.Fragment key={index}>
              {template.Group !== lastGroup &&
                (<div>
                <Label>{template.Group}</Label>
                </div>)
              }
              <TemplateCard
                key={template.Name}
                ....
              >                       
                { template.Name }
              </TemplateCard>                  
            </React.Fragment>);
        }

更多改进/需要记住的事情-

如果在返回JSX元素之前进行操作，请在.map()内添加return语句。
向.map()中的元素添加键。
仔细检查一下括号是否丢失。如果您是JSX的新手，可能会有点混乱

全部，谢谢您的帮助。

由于Jayakumar说我可能需要发布更多代码，所以我无法使用它。无论如何，我现在设法解决了另一种方法。通过使用单独的数组并在此数组下面有一个新部分来解决，此问题稍后可能会再次出现，但现在可以了。

谢谢

jsx中的条件输出HTML

netdyk 回答：jsx中的条件输出HTML

大家都在问