18.conditionals-in-jsx.md

JSX中的状态分支

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

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

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

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

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

// Y soo many ternary??? :-/
const sampleComponent = () => {
  return (
    <div>
      {flag && flag2 && !flag3
        ? flag4
        ? <p>Blah</p>
        : flag5
        ? <p>Meh</p>
        : <p>Herp</p>
        : <p>Derp</p>
      }
    </div>
  )
};

• 最佳实践: 将逻辑移到子组件内部
• 另一种hack的做法: 使用IIFE(Immediately-Invoked Function Expression 立即执行函数)

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

const sampleComponent = () => {
  return (
    <div>
      {
        (() => {
          if (flag && flag2 && !flag3) {
            if (flag4) {
              return <p>Blah</p>
            } else if (flag5) {
              return <p>Meh</p>
            } else {
              return <p>Herp</p>
            }
          } else {
            return <p>Derp</p>
          }
        })()
      }
    </div>
  )
};

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

const sampleComponent = () => {
  const basicCondition = flag && flag2 && !flag3;
  if (!basicCondition) return <p>Derp</p>;
  if (flag4) return <p>Blah</p>;
  if (flag5) return <p>Meh</p>;
  return <p>Herp</p>
}

参考资料:

• https://engineering.musefind.com/our-best-practices-for-writing-react-components-dec3eb5c3fc8
• Conditional rendering