React/Redux应用使用react-confirm-alert时控制台出现Prop类型错误求助

嘿，我帮你分析下这个警告：Warning: Failed prop type of type 'object', expected string，本质就是你给react-confirm-alert的某个prop传了对象类型，但组件期望的是字符串。结合你提供的代码片段，大概率是调用confirmAlert时的参数传错了类型，我给你几个排查和解决方向：

核心问题原因 #

react-confirm-alert的默认配置里，title和message这两个prop是期望接收字符串的，但如果你直接给它们传了JSX元素（比如你的<Sharelink />组件，本质是React对象），就会触发这个类型警告。

解决方案 #

1. 改用custom属性传递自定义内容 #

如果你的弹窗需要展示React组件（比如<Sharelink />），不要用message或title，而是用custom属性来定义整个弹窗的自定义内容，这是官方推荐的自定义弹窗方式：

import { confirmAlert } from 'react-confirm-alert';
import 'react-confirm-alert/src/react-confirm-alert.css';
import { Sharelink } from '../modal/sharelink';
import React from 'react';

export const publisher = (message) => {
  confirmAlert({
    // 用custom传入完整的自定义弹窗内容
    custom: (
      <div className="custom-alert">
        <h3>确认分享？</h3>
        {/* 这里可以直接放你的Sharelink组件 */}
        <Sharelink />
        {/* 如果message是字符串，也可以在这里展示 */}
        {message && <p>{message}</p>}
      </div>
    ),
    // 配置弹窗按钮
    buttons: [
      {
        label: '确认',
        onClick: () => {
          // 这里写你的确认逻辑
        }
      },
      {
        label: '取消',
        onClick: () => {}
      }
    ]
  });
};

2. 确认包版本，按需升级 #

如果你确实想用title或message传递JSX，那可以检查下你的react-confirm-alert版本。较新的版本已经把title和message的类型放宽为ReactNode（支持字符串、JSX等），如果你的版本较低，升级到最新版可能也能解决问题：

npm update react-confirm-alert

3. 检查是否误传了对象类型的message #

如果你的publisher函数接收的message参数本身是个对象（而不是字符串），直接把它传给confirmAlert的messageprop也会触发警告，这时候需要把对象转换成字符串，比如：

// 错误示例：message是对象
confirmAlert({ message: message });

// 修正：把对象转成字符串，或者提取需要的字符串属性
confirmAlert({ message: JSON.stringify(message) });
// 或者如果message有text属性：message.text

验证效果 #

修改后重新运行项目，控制台的prop类型警告应该就消失了，同时弹窗功能依然正常工作。

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