问题描述
我还不精通 Typescript,我正在尝试使用 Typescript create a custom Tooltip content 在我的 React 应用程序中为我的 Recharts 图表。 @types/recharts
已作为 devDependencies
之一安装。
但是,当我如下所示定义 CustomTooltip
函数时,Typescript 抛出错误
绑定元素“active”隐式具有“any”类型。 TS7031
我们如何解决这个问题?
const CustomTooltip = ({ active,payload,label }) => {
if (active) {
return (
<div className="custom-tooltip">
<p className="label">{`${label} : ${payload[0].value}`}</p>
<p className="desc">Anything you want can be displayed here.</p>
</div>
);
}
return null;
}
return (
<ComposedChart data={data}>
...
<Tooltip content={<CustomTooltip />} />
</ComposedChart>
)
类型“{}”缺少类型“ICustomToolip”中的以下属性:活动、负载、标签 TS2739
interface ICustomToolip {
active: any;
payload: any;
label: any;
}
const CustomTooltip = ({ active,label }: ICustomToolip) => {
if (active) {
return (
<div className="custom-tooltip">
<p className="label">{`${label} : ${payload[0].value}`}</p>
<p className="desc">Anything you want can be displayed here.</p>
</div>
);
}
return null;
}
解决方法
尝试执行以下操作(使用 rechart 的类型)。
但请记住,您必须添加@types/recharts npm 包;)
import { TooltipProps } from 'recharts';
import {
ValueType,NameType,} from 'recharts/src/component/DefaultTooltipContent';
const CustomTooltip = ({
active,payload,label,}: TooltipProps<ValueType,NameType>) => {
if (active) {
return (
<div className="custom-tooltip">
<p className="label">{`${label} : ${payload?.[0].value}`}</p>
<p className="desc">Anything you want can be displayed here.</p>
</div>
);
}
return null;
};
return (
<ComposedChart data={data}>
...
<Tooltip content={<CustomTooltip />} />
</ComposedChart>
);
,
它通常对我有用,但其他方式可能是:
const CustomTooltip = ({ active,label }: any) => {
,
通常
TooltipProps<number,string>
但取决于你的图表数据,所以一般
TooltipProps<ValueType,NameType>