[英]Typescript Interface for Recharts Custom Tooltip
由于不熟悉 Typescript,我正在尝试使用 Typescript 在我的 React 应用程序中为我的 Recharts 图表创建自定义工具提示内容。 @types/recharts
已作为devDependencies
之一安装。
但是,当我如下所示定义CustomTooltip
function 时,Typescript 会抛出错误
绑定元素“活动”隐式具有“任何”类型。 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”中的以下属性:活动、有效负载、label TS2739
interface ICustomToolip {
active: any;
payload: any;
label: any;
}
const CustomTooltip = ({ active, payload, 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 package;)
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, payload, label }: any) => {
通常
TooltipProps<number, string>
但取决于你的图表数据,所以一般来说
TooltipProps<ValueType, NameType>
这是一些可以帮助人们的代码。 我正在使用 typescript 顺便说一句。 我在没有显式接口的情况下做到了这一点,只是像这样的任何类型。
`{
'time': item.DateTime.getTime(),
'data': 1,
'change_type': "some_string",
}`
在你的 TSX 中,确保像这样传入 undefined 。 网站上的示例很好,没有明确说明,但我的编辑抱怨了一些错误。 <Tooltip content={<CustomTooltip active={undefined} payload={undefined} label={undefined}/>} />
对于 CustomToolTip,这对我来说很难理解。 有效负载的索引必须为 0。然后调用点运算符,因为那里有有效负载 class 来访问您的自定义属性,例如时间、数据和 change_type
const CustomTooltip = ({ active, payload, label }) => {
if (active && payload && payload.length) {
return (
<div className="custom-tooltip">
<p className="label">{`${label} : ${payload[0].payload.time}`}</p>
<p className="label">{`${label} : ${payload[0].payload.data}`}</p>
<p className="label">{`${payload[0].payload.change_type}`}</p>
<p className="desc">Anything you want can be displayed here.</p>
</div>
);
}
return null;
};
然后它应该在 hover 上正确弹出,没有任何问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.