react的return中for循环该如何输出？

Question

照例先上代码，

getPlanDatas(){
    const len = 7;
    const rowNum = 2;
    let res = [];
    for(let i=0;i<rowNum;i++){
        res.push(<Row gutter={16}>);
        //this.props.reps.data 是一个data组成的数组
        let data = this.props.reps.data.slice(i*3, (i+1)*3); // 3个为一组取值，进行二次循环
        console.log('data --->', data);
        res.push(data.map((item, index)=>{
            <Col span={8}>
                <div className="aaa">
                    item.name
                </div>
                <div className="bbb">
                    item.content
                </div>
            </Col>
        }))
        res.push(</Row>);
    }
    console.log('res--->',res);
    
    return(
        res
    )
}

<Row gutter={16}>
    <Col span={8}>
        <div className="aaa">
            111
        </div>
        <div className="bbb">
            222
        </div>
    </Col>
    <Col span={8}>
        <div className="aaa">
            111
        </div>
        <div className="bbb">
            222
        </div>
    </Col>
    <Col span={4}>
        <div className="aaa">
            111
        </div>
        <div className="bbb">
            222
        </div>
    </Col>
</Row>

如何修改代码1 可以实现直接return出 代码2的效果?

给个类似的例子也可以:), 网上看到的 都是 push一层的数据，没有2次push。

主要问题是在for循环中，第一次push后的值都变成了了 children的值，而不是进行运算。

Answer 1

for(let i=0;i<rowNum;i++){

//this.props.reps.data 是一个data组成的数组
let data = this.props.reps.data.slice(i*3, (i+1)*3); // 3个为一组取值，进行二次循环
console.log('data --->', data);
res.push(
    <Row gutter={16}>
        {
            data.map((item, index) => {
                <Col span={8}>
                    <div className="aaa">
                        item.name
                    </div>
                    <div className="bbb">
                        item.content
                    </div>
                </Col>
            })
        }
    </Row>
);

}

react中，组件不是通过字符串拼接组装的

Answer 2

自己解决了，
大致代码：

getPlanDatas(){
        const len = this.props.reps.data.length;
        // console.log('len::', len);
        const rowNum = Math.ceil(len/6);
        console.log('rowNum::', rowNum);        
        let res = [];
        // console.log('res------->',res);
        for(let i=0;i<rowNum;i++){
            let content = [];
            let data = this.props.reps.data.slice(i*6, (i+1)*6);
            // console.log('data --->', data);
            content.push(data.map((item, index)=>{
                // console.log(item);
                return(
                    <Col span={4} key={index}>
                        <div className={Style.plan_detail_content_list}>
                            <div className={Style.plan_type}>
                                <span>{item.PLAN_TYPE}</span>
                            </div>
                            <div className={Style.plan_text}>
                                <div className={Style.plan_text_title}>
                                    <p>{item.PLAN_TITLE}</p>
                                </div>
                                <div className={Style.plan_text_con}>
                                    {item.PLAN_CONTENT}
                                </div>
                            </div>
                        </div>
                    </Col>
                )
            }))
            
            res.push(
                <Row gutter={16} key={i}>
                    {[...content]}
                </Row>
            );
        }        
        return(
            res
        )
    }

先将 children push到一个list中，然后 第二次push的时候，利用[...content]来取出原来的children,
说实话 不太理解之前为什么会错误， 下次 再看看，暂时是解决了。

感谢 @顾志强

之前以为是字符串拼接，所以导致了错误，感谢指出！