react的return中for循環(huán)該如何輸出？

照例先上代碼，

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 是一個(gè)data組成的數(shù)組
        let data = this.props.reps.data.slice(i*3, (i+1)*3); // 3個(gè)為一組取值，進(jìn)行二次循環(huán)
        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 可以實(shí)現(xiàn)直接return出代碼2的效果?

給個(gè)類似的例子也可以:), 網(wǎng)上看到的都是 push一層的數(shù)據(jù)，沒有2次push。

主要問題是在for循環(huán)中，第一次push后的值都變成了了 children的值，而不是進(jìn)行運(yùn)算。

回答

編輯回答

雅痞

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

//this.props.reps.data 是一個(gè)data組成的數(shù)組
let data = this.props.reps.data.slice(i*3, (i+1)*3); // 3個(gè)為一組取值，進(jìn)行二次循環(huán)
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中，組件不是通過字符串拼接組裝的

2018年2月20日 19:49

編輯回答

涼心人

自己解決了，
大致代碼：

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到一個(gè)list中，然后第二次push的時(shí)候，利用[...content]來取出原來的children,
說實(shí)話不太理解之前為什么會(huì)錯(cuò)誤，下次再看看，暫時(shí)是解決了。

感謝 @顧志強(qiáng)

之前以為是字符串拼接，所以導(dǎo)致了錯(cuò)誤，感謝指出！

2018年1月15日 23:14