Recharts 自定义工具提示的 Typescript 界面

如何解决Recharts 自定义工具提示的 Typescript 界面

我还不精通 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>