ReactJS 中条件判断相关怎么处理

[wangxiaoaer]

根据不同的条件渲染不同内容,vue 和 ng 中一般通过 if 指令进行:

.....

Reactjs 中好像需要把当前条件需要渲染的内容提取成变量,这就导致在正常从上往下写的时候需要判断了,马上再回到上面新建一个变量,再回来使用这个变量. 当某个组件里面判断较多的时候感觉很烦人.

有没有好办法

[hlwjia]

多数时间写 react, 刚接触 vue 的时候也是各种不习惯。他俩不是一个思维模式

可以去 github 上搜一圈 react 的组件，看看是怎么写的。不要用 vue 的思维去写

[15757175166]

｛ flag&&＜ Component/＞｝ or ｛ flag?Component/＞:null ｝

[wangxiaoaer]

@15757175166 #2 条件渲染的未必正好是一个 component,可能是这样:

```
if(xx){
<div ...
<h1>ssfdsa</h1>
<p>sss</p>
</div>
}else{
<div ...
<h1>ssfdsa</h1>
<p>sss</p>
</div>
}
```

[asvencoop]

个人感觉复杂的条件判断应该拆分组件了， 避免在组件内写多条件判断，后面的维护是个大坑

[YYYeung]

可以需要根据条件渲染的部分，抽象成一个方法，在这个方法中进行判断，为 true 就返回渲染的部分，为 false 就直接返回 null

然后在 render 中调用上面定义的方法，感觉这样还可以提高代码的可读性，起码一眼就可以通过方法名来知道这部分渲染的是什么了

[ChefIsAwesome]

某些写模板写习惯的朋友在写 react 的时候，思维换不过来，render 函数里头一写就是一大堆，恨不得把整个页面的 html 都给写里头。这一大堆 html 里碰上有条件判断的时候就手足无措。接下来放弃，开骂的人非常多。

在这里提醒下，react 的核心思想就是组件化。把大组件拆成小组件，不仅能提高可读性，提高复用性，性能上还能有非常大的提升。你把组件拆分了，条件判断这种事情根本不会对你造成影响了。

[duzhihao]

```js
<div className="c000 flex jc-center ai-center">
{query && query.type && !selectVal
? query.type
: search_category &&
search_category.length > 0 &&
search_category[
search_category.findIndex(
item => item.id === parseInt(selectVal, 0)
) > -1
? search_category.findIndex(
item => item.id === parseInt(selectVal, 0)
)
: 0
].name}
<i className="i-down font20 ml10" />
</div>
```
昨天写的判断

[IceBay]

@duzhihao #7 看着好难受

[wangxiaoaer]

@ChefIsAwesome 我是觉得组件拆分的粒度应该有个度，拆分过多一是影响可读性，二是造成组件爆炸，文件爆炸。

[15757175166]

@wangxiaoaer 符合 jsx 语法的代码块处理方式都是一样的

[duzhihao]

@IceBay 没优化，我们技术总监有代码洁癖要是让他看见少不了一顿臭骂。。。

[IceBay]

@duzhihao #11 我在 10 分钟前还是决定从 React 转 Vue，React 写的好难受。不知道有没有关于 React 的建议？