引入react-alert的Alerts组件后报Objects are not valid as a React child错误

• 核心原因是react-alert的withAlert高阶组件使用方式错误：withAlert是柯里化函数，支持先传入配置参数，执行后才会返回真正的高阶组件。你直接将Alerts组件传入withAlert，导致导出的不是可直接渲染的React组件，而是一个待执行的函数，渲染时就会触发「对象不能作为React子元素」的报错。
• 次要排查点：你在Alerts.js中同时导出了命名导出的未包裹Alerts类和默认导出的高阶组件包裹后的实例，如果App.js中不小心用了命名导入import { Alerts } from './layout/Alerts'，也会出现同样报错，且未被withAlert包裹的组件拿不到this.props.alert，运行时也会抛出异常。

方案1：修正高阶组件调用（适配类组件写法） #

修改Alerts.js的导出语句，给withAlert加一对空括号先执行：

// Alert.js 修改前
export default withAlert(Alerts);
// Alert.js 修改后
export default withAlert()(Alerts);

如果需要给单个Alert组件传专属配置，也可以在括号里传入配置项：

export default withAlert({ timeout: 5000 })(Alerts);

同时确认App.js中的导入是默认导入：

// 正确写法，导入默认导出的包裹后组件
import Alerts from "./layout/Alerts";
// 错误写法，不要用命名导入
// import { Alerts } from "./layout/Alerts";

方案2：适配高版本react-alert（推荐写法） #

如果你使用的是v7及以上版本的react-alert，官方已经废弃了withAlert高阶组件，更推荐用函数组件+useAlert Hook的写法改写Alerts组件：

// Alert.js 改写后
import React, { useEffect } from "react";
import { useAlert } from "react-alert";

const Alerts = () => {
  const alert = useAlert();
  useEffect(() => {
    alert.show("It's Worked");
  }, [alert]);
  return <></>;
}

export default Alerts;

这种写法不需要高阶组件包裹，代码更简洁，也不会出现调用错误。

如果修改后还是报错，可以检查依赖版本兼容性：react-alert v6版本匹配react-alert-template-basic v1版本，版本不匹配也可能导致高阶组件返回异常。

内容的提问来源于stack exchange，提问作者Waleed ur Rehman