如何从两个不同库导入同名Tooltip组件且避免报错？

这个问题在日常开发中太常见啦，ES6模块提供的重命名导入机制就能轻松搞定！下面给你两种实用的解决方案：

方法一：直接重命名导入的组件 #

在导入时使用as关键字给每个Tooltip指定独一无二的别名，这样就能明确区分来自不同库的组件：

// 给react-leaflet的Tooltip起别名LeafletTooltip
import { Tooltip as LeafletTooltip } from "react-leaflet";
// 给recharts的Tooltip起别名RechartsTooltip
import { Tooltip as RechartsTooltip } from "recharts";

之后在代码里就可以直接用LeafletTooltip和RechartsTooltip来分别使用两个组件，完全不会有命名冲突啦。

方法二：导入整个模块作为命名空间 #

如果你还需要用到这两个库中的其他组件，可以把整个模块导入并作为命名空间，之后通过命名空间来访问Tooltip：

import * as ReactLeaflet from "react-leaflet";
import * as Recharts from "recharts";

使用组件的时候就像这样：

<ReactLeaflet.Tooltip content="Leaflet提示" />
<Recharts.Tooltip content="Recharts提示" />

这种方式适合需要批量使用库中多个组件的场景，能让代码结构更清晰。

两种方法都能解决你的问题，根据自己的使用场景选就行～

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