标签：
写React组件，基本上使用jsx文件，在render方法中返回html节点。然而，在jsx中的html标签中的js代码，只能是简单运算，对象，或函数调用，并不支持if-else或for-while等结构，因此，有时我们需要根据条件决定不同元素，或决定是否显示某元素时，不得不将这段代码抽到render-return以外，如此，程序虽然可以运行，代码上却破坏了html骨架结构，不便于样式控制和直观理解。这里介绍几种方法解决此问题，使得所有html元素在一处得到统一管理。
可以使用三元运算符
render(){ return ( <div> {1 > 2 ? <p>yes</p> : <a>no</a>} </div> ) }
可以利用对象的map特性
name: ‘lucy‘, render(){ return ( <div> {{ ‘bob‘: <p>i am bob</p>, ‘alan‘: <p>i am alan</p>, ‘lucy‘: <p>i am lucy</p> }[this.name]} </div> ); }
包括集合处理以及复杂的条件判断，应该将算法和数据分离，并将算法单独封装起来以实现简单调用
如map
render(){ return ( <div> {[‘you‘, ‘are‘, ‘good‘].map((v, i)=>{ return <p key={i}>{v}</p> })} </div> ); },
如复杂判断
render(){ return ( <div> {this.shouldShow( <p>yes</p>, <p>no</p>)} </div> ) }, shouldShow(yesContent, noContent) { let ok; // 检查条件1…… // 检查条件2…… // …… if (ok) return yesContent; else return noContent; }
综上，我们可以将组件中的html元素统一到一处进行管理。特别注意，html部分应该强调文档结构、骨架，即，有哪些内容，如何连接，而不应该夹杂过多的逻辑代码，因此，此处应该只使用简单的控制语句或算法调用，而不应该写复杂的js代码。判断标准：js代码是否短小精干，一目了然。
标签：
原文地址：http://www.cnblogs.com/zhaoyao91/p/5011832.html
