简化 React.js 中的条件渲染

作为一名专业开发者，你必须紧跟最新的技术趋势。今年，我把 Svelte 添加到了我的愿望清单中，作为一个新的学习框架。
在研究 Svelte 的过程中，我对他们处理条件渲染的方式感到惊讶。
不妨看看他们文档中的这个示例：

    {#if user.loggedIn}
      <button on:click={toggle}>
        Log out
      </button>
    {/if}

所有内容都用 if 子句整齐地包裹起来，并与正常流程分开。

经过快速原型设计后，我向您展示了我编写过的最强大的组件，即 IF 组件。

   const IF = ({ condition, children }) => {
     if (!condition) return null;
     return <>{children}</>;
   };

通过将条件卸载到单独的组件中，这将大大提高代码的清洁度和可读性（免费）。

让我们想象一下 React 应用中的 Svelte 示例。它会是这样的：

…
return (
    <>
      {user.loggedIn && <button>Log out</button>}
    </>
  );
...

当只有一个条件时，这并不是世界末日的问题，但随着我们的应用程序的增长，条件也在增长。

看一下现在重构以使用 IF 的相同组件：

…
return (
    <IF condition={user.loggedIn}>
      <button>Log out</button>
    </IF>
  );
...

现在可以更轻松地跟踪条件并调试错误条件，而且由于条件已从 JSX 中消失，代码看起来更加简洁。

希望你觉得这有帮助❤️