react条件几中条件运算方式

if else

没什么好讲的。

function Demo() {
  if (true) {
      return <div>tom</div>
  }
  return null;
}

应用场景：
-

注意事项：
-

三元运算符

二选一渲染。

应用场景：
在两个候选结果中取一个的情况。

function Demo() {
    return (true/false) ? <div>tom</div> : <div>jerry</div>
}

注意事项：
避免嵌套，如果发生嵌套，那说明你的代码需要重构。

逻辑与（&&）

只期望条件为真时渲染。
jsx不会渲染boolean值，所以如果为false，就什么都不渲染。

应用场景：
只有一个候选结果，并且期望条件为真时展示。

function Demo() {
  return true && <div>tom</div>;
}

注意事项：
小心合理的值被当成假值。

// 如果数字为0，后面就不会被展示了，如果我们的意图并非如此，那这里就产生了bug
function Demo() {
  return num && <div>{num}</div>;
}

逻辑或（||）

只期望条件为真假渲染。（undefined、null、false、空字符串、0。）
jsx不会渲染boolean值，所以如果为true，就什么不渲染。

应用场景：
只有一个候选结果，并且期望条件为假时展示。

function Demo() {
  return false || <div>tom</div>;
}

注意事项：
小心合理的值被当成假值。

空值合并运算符

只期望条件为undefined或者unll时渲染。

function Demo() {
  return undefined ?? <div>tom</div>;
}

function Demo() {
  return null ?? <div>tom</div>;
}

应用场景：
一个候选结果，并且期望条件为undefined或null时展示。

注意事项：
避免与||混淆。