毕设踩坑系列之——业务逻辑

记录有关业务逻辑的坑

更新

---

[2019-7-21]

• Initial release

[2019-8-12]

Added

• 新增问题聊天视图区域滚动条常置于顶部

[2019-8-19]

Added

• 新增区块聊天室相关
  • 新增问题未读消息的统计思路

记录

---

1. 评论相关

1.1 不同的评论下, 切换回复框显隐状态

解决: 在组件中设置state

1.2 提取commentItem组件, 多个组件会共享一个props

解决: 将baseCommentInput变为非受控组件, 自己管理状态

1.3 动态创建展示组件

• ReactDOM.render

当display的时候, 生命周期无法正常执行, 而且此方法不能append

• 控制state动态append

1.4 创建评论&回复

解决: 只需添加from && to字段即可

2. 聊天室相关

2.1 未读消息的统计思路

• 四种状态
  • 用户在线
  • 用户在线 & 用户位于当前会话
  • 用户在线 & 不位于当前会话
  • 用户离线
• 只有当用户在线 & 位于当前会话时, 未读消息为0, 其它三种情况都需要更新未读消息
• 未读消息实时更新, 所以考虑采用redis存储

3. 其它

2.1 聊天视图区域滚动条常置于顶部

问题原因:

每发送一条消息, 需要自行下拉滚动条才能看见该聊天消息.

解决方法:

展开代码

function _setScrollWrapperToAffixBottom() {
  if ($scrollWrapper && $scrollWrapper.current) {
    const oDiv = ($scrollWrapper.current) as unknown as HTMLDivElement;

    oDiv.scrollTop = oDiv.scrollHeight;
  }
}