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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1486 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

return flag && <div />

还是写成三目运算

return flag ? <div /> : null

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

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

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

flag

div

运算

return

14 条回复 • 2020-10-28 11:58:19 +08:00

dethan

2020-10-27 18:57:49 +08:00 via Android

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

vision1900

2020-10-27 19:00:30 +08:00

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

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

vision1900

2020-10-27 19:01:51 +08:00

const 改为 function 。。。

Torpedo

2020-10-27 19:04:13 +08:00

第一种 ts 类型有可能报错

KyrieJoshua

2020-10-27 19:08:51 +08:00

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

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

vision1900

2020-10-27 19:16:40 +08:00

@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

2020-10-27 19:21:58 +08:00

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; };"

```