tencent cloud

文档反馈

ConversationListContext

最后更新时间:2024-10-09 15:11:35

    ConversationListProvider

    ConversationListProvider 作为整个 ConversationList 的包裹层,为 ConversationList 内部的所有组件提供上下文。
    ConversationListProvider 内部对 ChatEngineConversation 相关的数据进行监听处理,并传递给整个 ConversationList UI

    Props

    ConversationListProvider 接收两个可选参数 filtersort 用于处理要展示的 conversationList 数据:
    参数名
    类型
    默认值
    说明
    filter
    (conversationList: IConversationModel[]) => IConversationModel[]
    -
    用于筛选会话列表的函数。
    sort
    (conversationList: IConversationModel[]) => IConversationModel[]
    -
    用于排序会话列表的函数。

    基础使用

    import { ConversationListProvider, IConversationListProps } from '@tencentcloud/chat-uikit-react';
    
    function CustomConversationList(props: IConversationListProps) {
    <ConversationListProvider filter={props.filter} sort={props.sort}>
    <div>Custom ConversationList UI</div>
    </ConversationListProvider>;
    }

    useConversationList

    useConversationList 基于 React useContext Hook 实现。
    ConversationListProvider 内的所有组件,均可以通过 useConversationList 读取和订阅 context 中的值。

    Value

    useConversationList 提供的 context value 如下:
    参数名
    类型
    说明
    conversationList
    ChatEngine 中获取的原始的对话列表。
    filteredAndSortedConversationList
    ConversationList 要渲染的对话列表。
    这是经过 ConversationListProvider 过滤和排序后的对话列表。
    currentConversation
    当前打开的会话。
    setCurrentConversation
    (conversation: IConversationModel) => void;
    设置当前打开的会话。
    isLoading
    Boolean
    当前会话列表是否正在获取加载中。
    isLoadError
    Boolean
    当前会话列表是否获取错误。

    基础使用

    import { useConversationList } from '@tencentcloud/chat-uikit-react';
    
    const {
    conversationList,
    filteredAndSortedConversationList,
    currentConversation,
    setCurrentConversation
    } = useConversationList();
    
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持