• JSX中的状态分支
    • 参考资料:

    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. }

    参考资料:

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