请教一下前端写 React 中三目运算相关的写法？

[KyrieJoshua]

render 渲染的时候，大家一般会写成

return flag && <div />

还是写成三目运算

return flag ? <div /> : null

平时写的时候略有争议，感觉自己水平有限说不出个一二三四。

只能说前者复杂度低？但是可能会踩到 flag 为 0 渲染出来的坑。当然也可以写成 !!flag &&，但是有时会忘记，因为就算不写，程序一般也跑的起来。而三目运算要是写错，一般是运行不起来的。

大家会怎么写，写的方式有理由吗，还是说只是风格不同而已。

[dethan]

第一种 看久了有种赏心悦目的感觉

[vision1900]

// 你要不问这问题，我是不会想起这写法的
const If(condition,children) {
return condition ? children : null;
}

<If condition={flag}>
<div />
</If>

[vision1900]

const 改为 function 。。。

[Torpedo]

第一种 ts 类型有可能报错

[KyrieJoshua]

@dethan 确实，可读性上来说是比较好一些
@vision1900 这个好像是模版写法哈哈？很久没有这样写过了。。
@Torpedo 还没在 ts 里试过这么写，估计写之前要先定义类型了。。

我自己还是写三目比较多。。但也不得不承认，如果内容比较多，是有点丑陋。。

[vision1900]

@vision1900 惭愧，好久没写代码，解构都忘了，就当上面是伪代码吗；刚刚用 TS 实现了下 If 这个组件
import React from "react";

interface Props {
condition: boolean;
children: React.ReactElement;
}

const If: React.FC<Props> = ({ condition, children }) => {
return condition ? children : null;
};

export default If;

[akatquas]

TLDR;
第一种语义简单，节省字符数量，但是不能解决 falsy 的显示问题。比较适合 else 分支是不需要显示 Node 的情形。

第二种三元表达式，字符较多，上下文阅读压力大。可以根据条件选择渲染两种不同的 Node，不仅限于 null 。

写 JSX 还是要显示的写一些判断逻辑比较好。

```
if (flag) {
return <NodeA />
}

return <NodeB />
```

---

以下较长。

```js
const a =() => flag && <div />

const b = () => flag ? <div /> : null
```

两个方法会被 babel 编译成

```
var a = function a() {
return flag && /*#__PURE__*/React.createElement("div", null);
};

var b = function b() {
return flag ? /*#__PURE__*/React.createElement("div", null) : null;
};
```

看起来还是有差别。但是，编译成字节码，两种的操作是完全一致的。

```
node --print-bytecode --eval "var a = function a() { return flag && /*#__PURE__*/React.createElement("div", null); };"

node --print-bytecode --eval "var b = function b() { return flag ? /*#__PURE__*/React.createElement("div", null) : null; };"

```

[wxsm]

关于这个的思考，我写过一篇博文，欢迎讨论： https://wxsm.space/posts/2019-11-15-conditional-rendering-in-react.html

[jinliming2]

我觉得只是风格不一样。
第一种要记得加 !!，控制显示与否的时候用。
第二种在条件显示两种不同东西的时候用，return flag ? <A /> : <B />;

[mxT52CRuqR6o5]

比较习惯第一种，一眼就能看出是条件展示组件
后面一种写法，不看到冒号后面是不知道是二选一还是条件展示

[en20]

如果写 rn 的话第一种会直接渲染字符串而报错

[KyrieJoshua]

@akatquas 多谢大佬解答～
@wxsm 我去看看～
@jinliming2 我也是这么觉得，其实只是风格不一样而已。。
@mxT52CRuqR6o5 选择不同吧。。第二种可读性确实弱一些
@en20 记得之前也有踩过类似坑，所以写 React 的时候也沿用三目了。。

[svenzhaog]

第一种我是不会选的
第二种 三元的情况 我一般只会用在有两个组件渲染的情况
按照你的例子我一般会这样写 要么提前抛出 null 要么最终兜底抛出 null
renderTpl(){

if(!flag)return null

return <div/>

}

[enjoyCoding]

第一种 第二种是什么鬼 给人看的嘛 都不如用 if