Antd Modal.confirm的title添加加粗动态文本显示[object object]如何解决

Modal.confirm的title属性支持接收字符串或者React节点类型的值。你当前使用+运算符拼接普通字符串和JSX元素的写法是错误的：JSX本质是React.createElement执行后返回的普通JavaScript对象，当字符串与对象做加法运算时，对象会触发默认类型转换调用toString()，最终得到[object Object]字符串，这就是页面显示异常的直接原因。

放弃字符串拼接的写法，直接给title传入合法的React节点即可，以下是两种可直接使用的写法：

• 基础写法：用JSX空标签包裹完整标题内容，直接在内部插值动态内容

import { Modal } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;
confirm({
  title: (
    <>
      Are you sure you want to delete <b>{name}</b> ? This action cannot be undone.
    </>
  ),
  icon: <ExclamationCircleOutlined />,
  async onOk() {
    // 你的确认提交逻辑
  },
  onCancel() {
    console.log('Cancel');
  },
})

• 复杂场景写法：如果标题逻辑较复杂，可以封装为独立组件传入

// 可复用的标题组件
const DeleteConfirmTitle = ({ targetName }) => (
  <span>
    Are you sure you want to delete <b>{targetName}</b> ? This action cannot be undone.
  </span>
);

// 调用confirm时传入组件
confirm({
  title: <DeleteConfirmTitle targetName={name} />,
  icon: <ExclamationCircleOutlined />,
  async onOk() {},
  onCancel() {
    console.log('Cancel');
  },
})

注意：Antd 中所有支持ReactNode类型的配置项（如content、okText、cancelText等），都不要使用字符串拼接JSX的写法，直接传入合法React节点即可避免同类问题。

内容的提问来源于stack exchange，提问作者Mahendra Garg