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

【问题标题】：Typescript Interface for Recharts Custom TooltipRecharts 自定义工具提示的 Typescript 界面
【发布时间】：2021-04-30 22:50:59
【问题描述】：

由于我还不精通 Typescript，我正在尝试 create a custom Tooltip content 在我的 React 应用程序中使用 Typescript 获取我的 Recharts 图表。 @types/recharts 已安装为 devDependencies 之一。

但是，当我如下所示定义CustomTooltip 函数时，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”的以下属性：活动、有效负载、标签 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;
}

【问题讨论】：

标签： javascript typescript interface tooltip recharts

【解决方案1】：

它通常对我有用，但其他方式可能是：

const CustomTooltip = ({ active, payload, label }: any) => {

【讨论】：

【解决方案2】：

尝试执行以下操作（使用 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>
);

【讨论】：

【解决方案3】：

通常

TooltipProps<number, string>

但取决于你的图表数据，所以一般

TooltipProps<ValueType, NameType>

【讨论】：

【解决方案4】：

这里有一些可以帮助人们的代码。我正在使用打字稿顺便说一句。我在没有显式接口的情况下做到了这一点，只是这样的任何类型。

                `{ 
                    'time': item.DateTime.getTime(),
                    'data': 1,
                    'change_type': "some_string",
                }`

在您的 TSX 中，确保像这样传入 undefined。网站上的示例很好，没有明确说明，但我的编辑抱怨了一些错误。 <Tooltip content={<CustomTooltip active={undefined} payload={undefined} label={undefined}/>} />

对于 CustomToolTip，我很难理解。有效负载的索引必须为 0。然后调用点运算符，因为那里有一个有效负载类来访问您的自定义属性，如时间、数据和 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;
  };

然后它应该正确弹出，悬停时没有任何问题。

【讨论】：