PrimeReact与react-google-charts组件命名冲突问题解决方案咨询

云上老周

2026-8-10

解决PrimeReact与react-google-charts组件命名冲突的方案

核心问题

两个库都导出了名为Chart的组件，直接导入会导致命名冲突；另外React要求组件名称必须首字母大写，用小写chart作为组件名本身就会触发语法错误。

方法1：导入时直接重命名（推荐）

在导入阶段给两个组件分配不同的别名，彻底避免冲突：

// 给PrimeReact的Chart重命名为PrimeChart
import { Chart as PrimeChart } from 'primereact/chart';

// 给react-google-charts的Chart重命名为GoogleChart
import { Chart as GoogleChart } from 'react-google-charts';

之后使用时分别调用对应的别名组件即可：

// 使用PrimeReact的图表
<PrimeChart type="line" data={primeData} />

// 使用react-google-charts的图表
<GoogleChart chartType="Bar" data={googleData} options={chartOptions} />

方法2：针对Gantt图表的正确使用方式

如果是想用甘特图，注意两个库的甘特组件实现逻辑不同：

PrimeReact的甘特图是独立组件，需单独导入：
```
import { GanttChart } from 'primereact/ganttchart';
```
使用时直接调用<GanttChart />并传入对应props。
react-google-charts没有独立的Gantt组件，是通过Chart组件的chartType属性指定为"Gantt"来实现：
```
import { Chart } from 'react-google-charts';

<Chart
  chartType="Gantt"
  data={ganttData}
  options={ganttOptions}
  width="100%"
  height="400px"
/>
```
之前改名后报错大概率是因为混淆了两者的使用方式，按上述规范调用即可。