构建用户组件

到目前为止，我们在 Sidebar 中渲染了一个 User 组件，但这个组件尚未创建。

请在项目根目录下创建一个 User.js 和 User.css 文件。完成了吗？

接下来是 User.js 文件的内容：

User.js

1import React from "react";
2import "./User.css";
3const User = ({ user }) => {
4  const { name, profile_pic, status } = user;
5  return (
6    <div className="User">
7      <img src={profile_pic} alt={name} className="User__pic" />
8      <div className="User__details">
9        <p className="User__details-name">{name}</p>
10        <p className="User__details-status">{status}</p>
11      </div>
12    </div> 
13  );
14};
15
16export default User;

别被这段代码吓到，其实它非常容易理解和阅读。再仔细看一遍。

用户的名字（name）、头像地址（profile_pic）和状态（status）通过解构从 props 中获取：const { name, profile_pic, status } = user;（第4行）。

这些值随后在返回的 JSX 中用于正确渲染，结果如下：

initial-render-of-users-1.gif

虽然目前显示效果比较简陋，但这说明组件已经可以正常工作了！

现在我们来添加样式。

首先，防止用户列表超出 Sidebar 容器的范围。

Sidebar.css：

1.Sidebar {
2  ...
3  overflow-y: scroll;
4}

此外，当前字体也不够美观，我们更换一下。

Index.css：

1@import url("https://fonts.googleapis.com/css?family=Nunito+Sans:400,700");
2
3body { ...
4  font-weight: 400;
5  font-family: "Nunito Sans", sans-serif;
6}

最后，处理 User 组件的整体显示样式。

User.css：

1.User {
2  display: flex;
3  align-items: flex-start;
4  padding: 1rem;
5}
6
7.User:hover {
8  background: rgba(0, 0, 0, 0.2);
9  cursor: pointer;
10}
11
12.User__pic {
13  width: 50px;
14  border-radius: 50%;
15}
16
17.User__details {
18  display: none;
19}
20/* 非小屏幕设备 */
21
22@media (min-width: 576px) {
23  .User__details {
24    display: block;
25    padding: 0 0 0 1rem;
26  }
27  .User__details-name {
28    margin: 0;
29    color: rgba(255, 255, 255, 0.8);
30    font-size: 1rem;
31  } 
32}

由于这不是一本 CSS 教程，部分样式细节不再深入解释。

完成最后的样式调整后，效果如下：

final-display-of-users-1.gif

太棒了！

我们已经从零开始，实现了一个美观的用户列表展示。

如果你正在跟着编写代码，可以尝试调整浏览器窗口大小，看看在移动设备上的响应式效果。

好了，目前 User 组件接收联系人数据作为用户属性传入，但这些数据真的需要交给 Redux 管理吗？我们接下来探讨这个问题。