Recharts 自定义工具提示的 Typescript 接口

Question

我还不精通 Typescript，我正在尝试 create a custom Tooltip content 在我的 React 应用程序中使用 Typescript 制作我的 Recharts 图表。 @types/recharts 已经安装为 devDependencies.

之一

但是，当我如下所示定义 CustomTooltip 函数时，Typescript 会抛出错误

Binding element 'active' implicitly has an 'any' type. 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>
)

尝试定义接口，但出现另一个错误

Type '{}' is missing the following properties from type 'ICustomToolip': active, payload, 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;
}

Answer 1

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

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

Answer 2

尝试执行以下操作（使用重新图表的类型）。

但请记住，您必须添加 @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>
);

Answer 3

通常

TooltipProps<number, string>

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

TooltipProps<ValueType, NameType>

Answer 4

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

                `{ 
                    '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;
  };

然后它应该会正确弹出，悬停时不会出现任何问题。

Answer 5

const CustomTooltip = ({
  active,
  payload,
  label,
}: {
  active: boolean;
  label: string;
  payload: {
    payload: {
      value: number
    }
  }[];
}) => {
  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 active = {
      false
    }
    payload = {
      []
    }
    label = "" / >
  }
  /> <
  /ComposedChart>
);

Answer 6

接受的答案是错误的，并且在正确配置了 typescript 并且禁止使用 any 的项目中会失败。

使用：

const CustomTooltip = ({ active, payload, label }: TooltipProps<number, string>): JSX.Element => {

将数字和字符串更改为您的数据类型。您也可以将它与 ValueType 和 NameType 一起使用，但使用您的类型声明它更有意义。

const CustomTooltip = ({ active, payload, label }: TooltipProps<ValueType, NameType>): JSX.Element => {

Recharts 自定义工具提示的 Typescript 接口

Typescript Interface for Recharts Custom Tooltip

javascript

interface

tooltip

typescript

recharts