如何在React导航栏中插入用户配置文件信息？

介绍

本文向您展示了如何将任何用户的配置文件信息插入到react导航栏中，以使其能够识别登录。它向您展示了如何插入和配置配置文件图片和菜单，如何重用登录按钮，如何处理回调，然后将讨论样式。

先决条件

本文假设您已经阅读了以前的导航栏教程。如果你还没有，你会在参考链接部分找到一个综合列表。本文假设您已经安装了Superflows库，启动并运行了默认导航栏，添加了品牌信息，还自定义了菜单，添加了搜索输入，还配置了登录按钮。本教程将从这里向前推进。

步骤1-插入个人资料图片

要显示配置文件图片，请将showProfile属性设置为true，并将配置文件图片url字符串设置为profilePicture属性。

return (
        <div>
                <SfNav showProfile={true} profilePicture='https://i.pinimg.com/736x/7f/79/6d/7f796d57218d9cd81a92d9e6e8e51ce4--free-avatars-online-profile.jpg' />
        </div>
);

步骤2-填充配置文件菜单

可以通过将必需的json数组对象传递给profileMenu属性来填充Profile菜单。我在这里展示一个例子。您可以查看json数组对象是如何组成的。

return (
        <div>
                <SfNav 
                  showProfile={true}
  profilePicture='https://i.pinimg.com/736x/7f/79/6d/7f796d57218d9cd81a92d9e6e8e51ce4--free-avatars-online-profile.jpg' 
                  profileMenu={[{caption: "Profile", link: "profile"}, [{caption: "Settings", link: "support"}, {caption: "Notifications", link: "notifications"}, {caption: "Privacy", link: "privacy"}], {caption: "Support", link: "support"}, {caption: 'Upgrade', link: "upgrade"}]} 
                  profilePreamble={<div style={{width: '100%', paddingTop: '10px', paddingBottom: '10px', paddingLeft: '10px', paddingRight: '10px'}}><small>Hi Hrushi!</small><br /><small><small><i>Welcome to Superflows!</i></small></small></div>}
                />
        </div>
);

步骤4-扩展功能：使用配置文件组件

导航栏为您提供了第二个容器，就在配置文件菜单下方，您可以在其中插入另一个自定义开发的组件。它被称为轮廓组件。如何使用它，完全取决于你的想象。在下面的示例中，它显示了一个注销按钮。

return (
        <div>
                <SfNav 
                  showProfile={true}
  profilePicture='https://i.pinimg.com/736x/7f/79/6d/7f796d57218d9cd81a92d9e6e8e51ce4--free-avatars-online-profile.jpg' 
                  profileMenu={[{caption: "Profile", link: "profile"}, [{caption: "Settings", link: "support"}, {caption: "Notifications", link: "notifications"}, {caption: "Privacy", link: "privacy"}], {caption: "Support", link: "support"}, {caption: 'Upgrade', link: "upgrade"}]} 
                  profilePreamble={<div style={{width: '100%', paddingTop: '10px', paddingBottom: '10px', paddingLeft: '10px', paddingRight: '10px'}}><small>Hi Hrushi!</small><br /><small><small><i>Welcome to Superflows!</i></small></small></div>}
                  profileComponent={<div style={{width: '100%', paddingTop: '10px', paddingBottom: '10px', paddingLeft: '10px', paddingRight: '10px'}}><small>Sign Out</small></div>}
                />
        </div>
);

---

冰焰狼 | 文

如果本篇博客有任何错误，请批评指教，不胜感激 ！