JSX中的状态分支

在以下情况下，和使用三元运算符相比

  1. const sampleComponent = () => {
  2.   return isTrue ? <p>True!</p> : <none/>
  3. };

使用&&符号的表达式简写会是一种更好的实践

  1. const sampleComponent = () => {
  2.   return isTrue && <p>True!</p>
  3. };

如果像下面一样有很多的三元运算符的话:

  1. // Y soo many ternary??? :-/
  2. const sampleComponent = () => {
  3.   return (
  4.     <div>
  5.       {flag && flag2 && !flag3
  6.         ? flag4
  7.         ? <p>Blah</p>
  8.         : flag5
  9.         ? <p>Meh</p>
  10.         : <p>Herp</p>
  11.         : <p>Derp</p>
  12.       }
  13.     </div>
  14.   )
  15. };
  • 最佳实践: 将逻辑移到子组件内部
  • 另一种hack的做法: 使用IIFE(Immediately-Invoked Function Expression 立即执行函数)

有一些库可以解决用jsx控制组件状态的问题，但是这些外部依赖并不是必须的，我们可以使用
IIFE 将if-else的逻辑封装到组件内部，外部调用者并不需要关心这些逻辑，正常调用即可。

  1. const sampleComponent = () => {
  2.   return (
  3.     <div>
  4.       {
  5.         (() => {
  6.           if (flag && flag2 && !flag3) {
  7.             if (flag4) {
  8.               return <p>Blah</p>
  9.             } else if (flag5) {
  10.               return <p>Meh</p>
  11.             } else {
  12.               return <p>Herp</p>
  13.             }
  14.           } else {
  15.             return <p>Derp</p>
  16.           }
  17.         })()
  18.       }
  19.     </div>
  20.   )
  21. };

或者也可以在满足条件的时候使用return强制跳出函数，这样能避免后面冗余的判断执行。

  1. const sampleComponent = () => {
  2.   const basicCondition = flag && flag2 && !flag3;
  3.   if (!basicCondition) return <p>Derp</p>;
  4.   if (flag4) return <p>Blah</p>;
  5.   if (flag5) return <p>Meh</p>;
  6.   return <p>Herp</p>
  7. }

参考资料: