)
还可以使用do表达式，但是需要插件@babel/plugin-proposal-do-expressions的转译来支持，
const Demo = () => (
<div>
{
do {
if (flag1 && flag2 && !flag3) {
if (flag4) {
<p>Blah</p>
} else if (flag5) {
<p>Meh</p>
} else {
<p>Herp</p>
}
} else {
<p>Derp</p>
}
}
}
</div>
)
再就是一种比较简单的可选办法，如下：
const Demo = () => {
const basicCondition = flag && flag1 && !flag3;
if (!basicCondition) return <p>Derp</p>
if (flag4) return <p>Blah</p>
if (flag5) return <p>Meh</p>
return <p>Herp</p>
}
最后一种使用jsx插件的就不详述和举例了，有兴趣的可以直接查看文档。
组件的传值
在单个jsx文件中可以写很多函数式组件来切分更小的粒度，例如之前的文章Vue后台管理系统开发日常总结__组件PageHeader，组件的形态有两种，一种是普通标题，另一种是带有选项卡的标题，那么在写的时候就可以这样写：
render() {
// partial html
const TabHeader = (
<div class="page-header page-header--tab"></div>
) // function partial
const Header = () => (
<div class="page-header"></div>
)
<div class="page-header">
{this.withTab ? TabHeader : <Header/>}
</div>
}
注意在拆分的时候，如果不需要做任何判断可以纯粹是HTML片段赋值给变量，如果需要条件判断就使用函数式组件的方式来写。需要注意的是由于render函数会多次被调用，写的时候注意一下对性能的影响，目前能力有限这方面就不作展开了。
既然使用函数式组件，那么同样可以在函数中传递参数了，参数是一个对象中，包含了以下属性
children # VNode数组，类似于React的children
data # 绑定的属性
attrs # Attribute
domProps # DOM property
on # 事件
injections # 注入的对象
listeners: # 绑定的事件类型
click # 点击事件
...
parent # 父组件
props # 属性
scopedSlots # 对象，作用域插槽，使用中发现作用域插槽也挂在这个下面
slots # 函数，插槽
虽然可以在函数式组件中传参数、事件、slot但是个人觉得不建议这样做，反而搞复杂了。
render() {
const Demo = props => {
