react render里面多次循环，怎么破
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>
);
}
}
展开
收起
1
条回答
写回答
写回答
-
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> ); } }2019-07-17 18:58:32赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
