react怎么在if后同时增加html和js语法？

#1 
 {  // 是否有子项目 

!fu?'':

     <ul class = "mt-3 list-group list-group-flush">

      fu.map(zi=>(
            <li class="list-group-item p-2 " key={zi.id}>
                       {zi.username}
            </li>
       ))

     </ul>
                
                
}

如上，这段代码无法工作，除非我删除 前后 ul代码块

我的想法是， 判断 递归出 fu 里面的每个项目， 并展示出来

并且，要在 li 标签前后，增加 ul 标签

如果 fu为空， 则什么都不显示

我运行的时候，他说我语法错误， 可是思路上 好像没有问题呀

恳请前辈指点 谢谢

#2

已解决

方法1:
把if后面的 那段代码抽离成一个组件FuMap， 然后

!fu?'':<FuMap>

方法2:
用这种引号， 就可以把模板语法 和 js html 互相结合

`确认删除该留言${item.children && item.children.length ? '及其底下的回复' : ''}吗？`