javascript - react render里面多次循环，怎么破

Question

render(){
        if(this.state.loading){
            return <Loading/>;
        }else{
            let [header={},bodyHtml='']=[this.state.articleDetail.header];
            bodyHtml=this.state.articleDetail.body.content.map(function (item1,index1) {
                bodyHtml+=<h4>{item1.firstTitle}</h4>;
                item1.firstTitleDes.map(function (item2,index2) {
                    bodyHtml+=<h6>{item2.secondTitle}</h6>;
                    item2.secondTitleDes.map(function (item3,index3) {
                        bodyHtml+=<p>{item3.describle}</p>;
                        bodyHtml+=<pre><code className={item3.codeType}>{item3.code}</code></pre>;
                    });
                });
                return (bodyHtml);
            });
            return (
                <p>
                    <Head/>
                    <p className="container">
                        <header className="aticle-header">
                            <h2>{header.title}</h2>
                            <p>发表于&nbsp;&nbsp;{header.date}&nbsp;&nbsp;|&nbsp;&nbsp;in&nbsp;&nbsp; <Link to="/">{header.type}</Link></p>
                        </header>
                        <article className="aticle-body">{bodyHtml}</article>
                    </p>
                </p>
            );
        }
    }

Answer 1

感觉要么就是你把处理数据的这部分代码放到别的地方去做，要么就是重构逻辑，减少循环嵌套。

Answer 2

用 react 话，不是可以更好的组建化？
你可以将每个循环中的结构单独提为一个组件：Item1，Item2，Item3
当前组件中 map <Item1>
<Item1> 中 map <Item2>
<Item2> 中 map <Item3>。

Answer 3

render(){

    if(this.state.loading){
        return <Loading/>;
    }else{
        let [header={},bodyHtml=[]]=[this.state.articleDetail.header];
        this.state.articleDetail.body.content.forEach(function (item1,index1) {
            bodyHtml.push(<h4 key={index1}>{item1.firstTitle}</h4>);
            item1.firstTitleDes.forEach(function (item2,index2) {
                bodyHtml.push(<h6 key={''+index1+index2}>{item2.secondTitle}</h6>);
                item2.secondTitleDes.forEach(function (item3,index3) {
                    bodyHtml.push(
                        <p key={''+index1+index2+index3}>
                            <p>{item3.describle}</p>
                            <pre><code className={item3.codeType}>{item3.code}</code></pre>
                        </p>
                    );
                });
            });
        });
        return (
            <p>
                <Head/>
                <p className="container">
                    <header className="aticle-header">
                        <h2>{header.title}</h2>
                        <p>发表于&nbsp;&nbsp;{header.date}&nbsp;&nbsp;|&nbsp;&nbsp;in&nbsp;&nbsp; <Link to="/">{header.type}</Link></p>
                    </header>
                    <article className="aticle-body">{bodyHtml}</article>
                </p>
            </p>
        );
    }
}

Answer 4

冲这个嵌套的程度，我觉得你应该改变结构了，你现在走的路会让你更痛苦。