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

• 資深大佬 : 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