即时通信 IM ConversationActions-聊天互动（含 UI）-文档中心-腾讯云

ConversationActions 组件负责对于单条会话进行操作，默认支持会话删除、会话置顶/取消置顶、会话免打扰/取消免打扰功能。
基础使用
当在 ConversationList 使用 ConversationActions 时，您可以通过 ConversationList 顶层 actionsConfig 参数直接进行自定义，actionsConfig 支持对于默认会话操作功能开关、事件响应、新增自定义操作项、基础 UI 定制等。
如您需要更高阶的定制，您可以通过 ConversationActions 自定义新的组件。
使用 actionsConfig 基础定制
import { UIKitProvider, ConversationList } from "@tencentcloud/chat-uikit-react";
﻿
const App = () => {
  return (
    <UIKitProvider>
      <ConversationList
        actionsConfig={{
          enablePin: false,
          onConversationDelete: (conversation: IConversationModel) => { console.log('Delete conversation success'); },
          customConversationActions: {
            'custom-actions-1': {
               label: 'custom-actions',
               onClick: (conversation: IConversationModel) => { console.log(conversation); },
             },
          },
      }}/>
    </UIKitProvider>
  );
}
自定义 ConversationActions 组件
import { UIKitProvider, ConversationList, ConversationActions, IConversationActionsProps } from "@tencentcloud/chat-uikit-react";
﻿
const CustomConversationActions = (props: IConversationActionsProps) => {
  return <ConversationActions {...props} enableDelete={false} />;
};
﻿
const App = () => {
  return (
    <UIKitProvider>
      <ConversationList
        style={{ maxWidth: '300px', height: '600px' }}
        ConversationActions={CustomConversationActions}
      />
    </UIKitProvider>
  );
}
Props
ConversationActions 组件的接口类型 IConversationActionsProps 基于 IConversationActionsConfig 接口进行扩展。 
IConversationActionsProps
﻿
﻿
﻿
参数名
类型
默认值
说明
conversation(Required)
﻿IConversationModel﻿
-
必选参数，表示当前渲染会话操作对应的会话。
className
String 
-
自定义根元素的类名。
style
React.CSSProperties
-
自定义根元素的样式。
IConversationActionsConfig
﻿
﻿
﻿
参数名
类型
默认值
说明
enablePin
Boolean
true
是否显示置顶功能按钮。
enableMute
Boolean
true
是否显示免打扰功能按钮。
enableDelete
Boolean
true
是否显示删除功能按钮。
onConversationPin
(conversation: IConversationModel, e?: React.MouseEvent) => void
-
自定义置顶/取消置顶会话的行为。
onConversationMute
(conversation: IConversationModel, e?: React.MouseEvent)
=> void
-
自定义免打扰/取消免打扰会话的行为。
onConversationDelete
(conversation: IConversationModel, e?: React.MouseEvent) => void
-
自定义删除会话的行为。
customConversationActions
Record<string, IConversationActionItem>
-
自定义会话操作项。
PopupIcon
ReactElement
-
自定义动作弹窗的图标。
PopupElements
ReactElement[]
-
自定义动作弹窗的内容。
onClick
(e: React.MouseEvent, key?: string, conversation?: IConversationModel) => void
-
点击动作项时的回调函数。
自定义组件
基础功能开关
通过设置 enablePin, enableDelete 和 enableMute 参数，您可以灵活地控制 ConversationActions 中的会话置顶、会话免打扰和会话删除的显示。
<ConversationActions enablePin={false} />
<ConversationActions enableDelete={false} />
<ConversationActions enableMute={false} />
enablePin={false}
enableDelete={false}
enableMute={false} 
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
事件响应
ConversationActions 组件默认支持会话删除、会话置顶/取消置顶、会话免打扰/取消免打扰功能，如已有功能的事件响应不符合您的需求，您可以自定义事件响应处理函数并进行覆盖; 除了支持对于功能事件响应的自定义外，您还可以通过 onClick 获取基础点击事件响应。
import { ConversationList, ConversationActions, IConversationActionsProps, Toast } from '@tencentcloud/chat-uikit-react';
import { IConversationModel } from '@tencentcloud/chat-uikit-engine';
﻿
const CustomConversationActions = (props: IConversationActionsProps) => {
  return (
    <ConversationActions
      {...props}
      onConversationDelete={(conversation: IConversationModel) => {
        conversation.deleteConversation().then(() => {
          Toast({ text: 'delete conversation successfully!', type: 'info' });
        }).catch(() => {
          Toast({ text: 'delete conversation failed!', type: 'error' });
        });
      }}
    />
  );
};
﻿
<ConversationList ConversationActions={CustomConversationActions} />
customConversationActions
customConversationActions 用于在 ConversationActions 上新增自定义操作项列表。
Record<string, IConversationActionItem>
IConversationActionItem
﻿
﻿
﻿
参数名
类型
默认值
说明
enable
Boolean
true
是否启用自定义操作项。
label
String
-
自定义操作项的展示内容。
onClick
(conversation: IConversationModel, e?: React.MouseEvent) => void
-
点击自定义操作项时的回调函数。
以下是使用 customConversationActions 新增自定义操作项的示例：
import { ConversationList, ConversationActions, IConversationActionsProps } from '@tencentcloud/chat-uikit-react';
﻿
const CustomConversationActions = (props: IConversationActionsProps) => {
  return (
    <ConversationActions 
      {...props} 
      customConversationActions={{
        'custom-actions-1': {
           label: 'custom-actions',
           onClick: (conversation: IConversationModel) => { console.log(conversation); },
         },
      }}
    />
  );
};
     
<ConversationList ConversationActions={CustomConversationActions} />
修改前
修改后
﻿
﻿
﻿
﻿
﻿
﻿
UI 界面定制
您可以通过 PopupIcon 参数定制唤醒弹出按钮样式，通过 PopupElements 定制弹出内容。
以下是在默认的 ConversationActions 组件的基础上进行二次开发，为其定制新的唤起按钮样式代码示例：
import { ConversationList, ConversationActions, IConversationActionsProps, Icon, IconTypes } from '@tencentcloud/chat-uikit-react';
﻿
const CustomConversationActions = (props: IConversationActionsProps) => {
  const customIcon = <Icon type={IconTypes.ADD} width={16} height={16} />;
  return (
    <ConversationActions {...props} PopupIcon={customIcon} />
  );
};
     
<ConversationList ConversationActions={CustomConversationActions} />
修改前
修改后
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿

IConversationActionsProps
参数名	类型	默认值	说明
conversation(Required)	IConversationModel	-	必选参数，表示当前渲染会话操作对应的会话。
className	`String`	-	自定义根元素的类名。
style	`React.CSSProperties`	-	自定义根元素的样式。
IConversationActionsConfig
参数名	类型	默认值	说明
enablePin	`Boolean`	`true`	是否显示置顶功能按钮。
enableMute	`Boolean`	`true`	是否显示免打扰功能按钮。
enableDelete	`Boolean`	`true`	是否显示删除功能按钮。
onConversationPin	(conversation: IConversationModel, e?: React.MouseEvent) => void	-	自定义置顶/取消置顶会话的行为。
onConversationMute	(conversation: IConversationModel, e?: React.MouseEvent) => void	-	自定义免打扰/取消免打扰会话的行为。
onConversationDelete	(conversation: IConversationModel, e?: React.MouseEvent) => void	-	自定义删除会话的行为。
customConversationActions	Record<string, IConversationActionItem>	-	自定义会话操作项。
PopupIcon	`ReactElement`	-	自定义动作弹窗的图标。
PopupElements	`ReactElement[]`	-	自定义动作弹窗的内容。
onClick	(e: React.MouseEvent, key?: string, conversation?: IConversationModel) => void	-	点击动作项时的回调函数。

`enablePin={false}`	`enableDelete={false}`	`enableMute={false}`

IConversationActionItem
参数名	类型	默认值	说明
enable	`Boolean`	`true`	是否启用自定义操作项。
label	`String`	-	自定义操作项的展示内容。
onClick	(conversation: IConversationModel, e?: React.MouseEvent) => void	-	点击自定义操作项时的回调函数。

修改前	修改后

修改前	修改后

ConversationActions

本页目录：

基础使用

使用 actionsConfig 基础定制

自定义 ConversationActions 组件

Props

IConversationActionsProps

﻿

﻿

﻿

IConversationActionsConfig

﻿

﻿

﻿

自定义组件

基础功能开关

事件响应

customConversationActions

IConversationActionItem

UI 界面定制