Reactjs React JSX，如何在JSX的html中编写复杂条件和for循环？

我有一个render方法，它需要执行如下代码。 我想在JSX代码中使用if-else条件呈现嵌套for循环

如何像下面的概念代码一样在JSX中编码

我编写代码的目的是：

class Step4Com扩展组件
{
建造师（道具）{
超级（道具）；
}
render（）
{
const products=this.state.products；
返回
为了（让我说）{
if（pro.typex=='has_variant'&&pro.typeu code=='xccc'）{
对于（让专业变量的变量）{
{pro.name+'：'+variant.name}
}
}
}
;
}
}
导出默认Step4Com以下是我要做的，希望能有所帮助

import React from 'react';

const Products = ({ pro }) => {
    const children = [];
    if (pro.typex === 'has_variant' && pro.type_code === 'xccc') {
        for (let variant of pro.variants) {
            children.push(
                <div key={pro + '_' + variant.id}>
                    <div className="text-ac">
                    {pro.name + ' : ' + variant.name}
                    </div>
                </div>
            );
        }
    }
    return children;
}

class Step4Com extends Component<any, any> {

    constructor(props) {
        super(props);
    }

    render() {
        const products = this.state.products;
        return (
            <div>
              {
                products.map(product => <div key={product.id}><Products pro={product} /></div>)
              }
            </div>
        );
    }
}
export default  Step4Com;


从“React”导入React；
常量乘积=（{pro}）=>{
const children=[]；
如果（pro.typex==='has_variant'&&pro.type_code=='xccc'）{
对于（让专业变量的变量）{
推(
{pro.name+'：'+variant.name}
);
}
}
返回儿童；
}
类Step4Com扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
const products=this.state.products；
返回(
{
products.map（product=>）
}
);
}
}
导出默认Step4Com；