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 (
<div>
<Head/>
<div className="container">
<header className="aticle-header">
<h2>{header.title}</h2>
<p>发表于 {header.date} | in <Link to="/">{header.type}</Link></p>
</header>
<article className="aticle-body">{bodyHtml}</article>
</div>
</div>
);
}
}
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(
<div key={''+index1+index2+index3}>
<p>{item3.describle}</p>
<pre><code className={item3.codeType}>{item3.code}</code></pre>
</div>
);
});
});
});
return (
<div>
<Head/>
<div className="container">
<header className="aticle-header">
<h2>{header.title}</h2>
<p>发表于 {header.date} | in <Link to="/">{header.type}</Link></p>
</header>
<article className="aticle-body">{bodyHtml}</article>
</div>
</div>
);
}
}
冲这个嵌套的程度,我觉得你应该改变结构了,你现在走的路会让你更痛苦。
用 react 话,不是可以更好的组建化?
你可以将每个循环中的结构单独提为一个组件:Item1,Item2,Item3
当前组件中 map <Item1>
<Item1> 中 map <Item2>
<Item2> 中 map <Item3>。
感觉要么就是你把处理数据的这部分代码放到别的地方去做,要么就是重构逻辑,减少循环嵌套。