头部组件

我们从 Header 组件开始。

当前 chatWindow 组件的内容如下：

1import React from "react";
2const ChatWindow = ({ activeUserId }) => {
3  return (
4    <div className="ChatWindow">与用户 ID 的对话：
5      {activeUserId}</div>
6  ); 
7};
8export default ChatWindow;

这段代码作用有限。请将其更新为以下内容：

1import React from "react";
2import store from "../store";
3import Header from "../components/Header";
4const ChatWindow = ({ activeUserId }) => {
5  const state = store.getState();
6  const activeUser = state.contacts[activeUserId];
7  return (
8    <div className="ChatWindow">
9      <Header user={activeUser} />
10    </div>
11  );
12};
13
14export default ChatWindow;

有哪些变化？

请记住，activeUserId 是作为 props 传递给 ChatWindow 组件的。

现在，我们不再渲染文本“与用户 ID 的对话：...”，而是渲染 Header 组件。

Header 组件若不知道被点击的用户信息，就无法正确显示内容。为什么？

因为 Header 中显示的姓名和状态都属于被点击的用户。

clicked-contact-header-1.png

为了跟踪当前活跃用户，我们创建了一个新变量 activeUser，并从 state 对象中获取其值：

1const activeUser = state.contacts[activeUserId];

这是如何工作的？

首先，我们从 Redux 仓库中获取当前状态：

1const state = store.getState();

请记住，应用用户的每个联系人都存储在 contacts 字段中，并且每个用户都以其 user_id 作为键进行映射。

因此，可以通过在 contacts 对象中使用对应的 id 来获取当前活跃用户：

1state.contacts[activeUserId]。

理解清楚了吗？

接下来，我们需要实现 Header 组件的具体渲染内容。