如何根据List是否为空的状态切换显示不同的对应界面

实现这个功能的核心逻辑就是根据数据源状态做条件渲染，不管用什么前端框架思路都是通用的，具体步骤如下：

• 先定义两个核心数据源：全量聊天列表chatList、当前选中会话对应的消息列表messageList
• 渲染前做两层状态判断：
  1. 如果chatList长度为0，直接渲染左侧空状态界面
  2. 如果chatList不为空，再判断当前messageList是否有有效数据：有就渲染右侧消息界面，没有还是显示空状态
• 如果是移动端场景，不用做左右分栏布局，直接根据状态做页面跳转即可。

下面给两个常用场景的代码参考：

React实现示例 #

import { useState } from 'react'

function ChatPage() {
  // 状态定义
  const [chatList, setChatList] = useState([])
  const [currentChatId, setCurrentChatId] = useState(null)
  const [messageList, setMessageList] = useState([])

  return (
    <div className="chat-layout">
      {/* 左侧聊天列表栏 */}
      <aside className="chat-list-sidebar">
        {chatList.map(item => (
          <div 
            key={item.id} 
            onClick={() => {
              setCurrentChatId(item.id)
              // 点击会话后拉取对应消息列表赋值给messageList
            }}
          >
            {item.sessionName}
          </div>
        ))}
      </aside>
      {/* 右侧主内容区 */}
      <main className="chat-content">
        {chatList.length === 0 || !messageList.length ? (
          <EmptyState /> // 你的空状态UI组件
        ) : (
          <MessageView list={messageList} /> // 你的消息列表UI组件
        )}
      </main>
    </div>
  )
}

原生JS实现示例 #

// 模拟接口返回的数据
const chatList = []
const messageList = []

// 获取DOM节点
const emptyStateDom = document.querySelector('.empty-state')
const messageViewDom = document.querySelector('.message-view')

// 切换显示逻辑
if (chatList.length === 0 || messageList.length === 0) {
  emptyStateDom.style.display = 'block'
  messageViewDom.style.display = 'none'
} else {
  emptyStateDom.style.display = 'none'
  messageViewDom.style.display = 'block'
}

内容的提问来源于stack exchange，提问作者Aniekan-abasi Akpakpan