React函数组件中Recharts YAxis的defaultProps警告解决咨询

警告原因 #

你看到的警告不是来自你的Overview组件，而是Recharts库内部的YAxis函数组件仍在使用defaultProps，而React即将在未来大版本中移除函数组件对defaultProps的支持，因此触发了该警告。你自己定义的yAxisProps和yAxisRightProps是正确的组件属性传递方式，和这个警告无关。

解决方案 #

1. 升级Recharts到最新版本

Recharts官方已经在后续版本中修复了这个问题，将内部函数组件的defaultProps替换为JavaScript默认参数。执行以下命令升级：

npm update recharts
# 或使用yarn
yarn upgrade recharts

升级后重新运行项目，警告应该会消失。

2. 临时屏蔽警告（若无法升级）

如果因依赖兼容问题暂时无法升级，可以通过以下方式临时过滤该警告：
在项目入口文件（如index.tsx/App.tsx）中添加代码：

const originalConsoleWarn = console.warn;
console.warn = (...args) => {
  if (typeof args[0] === 'string' && args[0].includes('YAxis: Support for defaultProps will be removed')) {
    return;
  }
  originalConsoleWarn(...args);
};

注意：这只是临时方案，优先推荐升级库版本。

Recharts中函数组件处理默认属性的正确方式 #

对于你自己的React函数组件（比如Overview），正确的默认属性写法是使用参数默认值，而非defaultProps，示例：

// 为data设置默认空数组
export function Overview({ data = [] }: { data?: OutputData[] }) {
  // ... 组件逻辑
}

这种写法符合React未来规范，也能避免类似的废弃特性警告。

内容的提问来源于stack exchange，提问作者said al hendi