以更干净的方式有条件地渲染 React 组件

大家好，

几乎在每个应用中，我们都会遇到需要有条件地渲染组件或元素的情况。例如，如果用户已登录，则显示其个人资料；否则，要求其登录；如果用户是管理员，则显示管理员页面等等。这类用例最常见的做法是使用 if-else、三元运算符、&& 运算符或 switch case。

虽然这些选项使用起来很简单，但有时它们可能会使你的代码变得更加混乱。今天，我们将介绍两种非常有效且更简洁的处理此类情况的方法。

使用枚举

让我们考虑一个场景，您希望根据用户角色显示应用的设置页面。这里的条件是：

如果用户是管理员，则显示她的管理员设置页面。
如果用户不是管理员，则显示用户设置页面。
如果用户是访客，请她登录以获取她的角色。

够简单了吧！除此之外，我们还要在各自的页面上打印用户名。（这只是为了理解如何将 props 传递给组件）。我创建了两个不同的组件：AdminSettings 和 UserSettings，并添加了一些列表项来模拟现实世界中的组件。

两个组件如下 -

const AdminSettings = ({ username }) => {
    return (
        <>
            <p>Hello {username}</p>
            <ul>
                <li>Admin Settings Option 1</li>
                <li>Admin Settings Option 2</li>
                <li>Admin Settings Option 3</li>
            </ul>
        </>
    );
};


const UserSettings = ({ username }) => {
    return (
        <>
            <p>Hello {username}</p>
            <ul>
                <li>User Settings Option 1</li>
                <li>User Settings Option 2</li>
                <li>User Settings Option 3</li>
            </ul>
        </>
    );
};

现在让我们了解一下条件渲染。我们将创建一个外部设置组件，它将获取username和userRole。使用这两个选项，我们可以决定渲染哪个设置组件。这个外部设置组件将包含此条件渲染的所有逻辑。我们先了解一下设置组件，然后再了解枚举和条件渲染。

const Settings = (props) => {
    const { userRole, username } = props;

    const roleSettings = (username) => ({
        admin: <AdminSettings username={username} />,
        user: <UserSettings username={username} />,
        guest: <p>Hello, you will need to login first!!</p>,
    });

    return (
        <div>
            <h1>Settings</h1>
            <p>{roleSettings(username)[userRole]}</p>
        </div>
    );
};

export default Settings;

在上面的代码中，roleSettings 函数被视为枚举。本质上，它只是返回一个包含不同组件的对象。因此，在 return 语句中，我们实际上是在尝试渲染该对象中与 userRole 匹配的一个键。由于该键包含组件，因此我们所需的组件将被正确渲染。

由于 roleSettings 是一个函数，因此整个条件渲染变得非常简洁易用。此外，您无需在应用程序中硬编码许多值。您可以使用相同的函数将 props 传递给组件。

除了枚举之外，其他有效的方法是使用 HOC（高阶组件）。

使用 HOC

React 中的高阶组件是包装器组件，它接收组件作为参数并返回一个组件。高阶组件在基于角色的访问控制系统中被认为非常有效。虽然这超出了本文的范围，但我一定会在后续文章中尝试涵盖它。

现在，仅为您提供用于条件渲染的 HOC 的一个小示例，让我们考虑相同的用例并使用 HOC 来显示已登录的用户。

HOC 看起来是这样的 -

function withLogin(Component) {
  return function EnhancedComponent({ isLoggedIn, ...props }) {
    if (isLoggedIn) {
      return <Component {...props} />;
    }

    return (
      <div>
        <p>Hello, please login to see your profile!</p>
      </div>
    );
  };
}

const ShowProfile = withLogin(Profile);

function App({ profile, isLoggedIn }) {
  return (
    <div>
      <h1>Hello Conditional Rendering</h1>

      <ShowProfile isLoggedIn={isLoggedIn} profile={profile} />
    </div>
  );
}

如果您检查代码，withLogin是一个高阶组件，如果用户已登录，它将返回详细的配置文件或设置页面，否则它只会返回一条要求用户登录的消息。

我们可以将类似的 HOC 用于加载器或更复杂的基于权限的用例，我们将在下一篇文章中介绍。

如果您正在使用更有效的条件渲染方式或 HOC 的一些不同用例，请在评论中与我分享！

如果您喜欢我的文章，您还可以通过Twitter与我联系或给我买杯咖啡。

继续学习！

文章来源：https://dev.to/hey_yogini/conditionally-render-react-components-in-cleaner-way-1ik5