如何设置 Recharts 自定义工具提示附加参数（React、Typescript）

Question

我正在尝试使用带有附加参数的

recharts

自定义工具提示。 但是当我从 js 改为 typescript 时，出现错误。

定义函数

import { TooltipProps } from "recharts";
import { ValueType,
  NameType,
} from "recharts/types/component/DefaultTooltipContent";

const CustomTooltip = (
    { active, payload, label }: TooltipProps<ValueType, NameType>,
    { StackedBarChartLabel }: { StackedBarChartLabel: BarChartShareLabelState }
  ) => {
    if (active && payload && payload.length) {
      return (
        <div style={{ backgroundColor: "white" }}>
          <p>{label}</p>
          {payload.map((pld: any) => (
            <p key={pld.dataKey}>
              {pld.dataKey}:{StackedBarChartLabel[`${label}`][`${pld.dataKey}`]}
            </p>
          ))}
        </div>
      );
    }
    return null;
  };

通话功能

<Tooltip
  content={(props) => (
    <CustomTooltip
       {...(props as TooltipProps<ValueType, NameType>)}
       StackedBarChartLabel={dataset.StackedBarChartLabel}
   />
   )}
/>

错误信息

Property 'StackedBarChartLabel' does not exist on type 'IntrinsicAttributes & Props<ValueType, NameType> & { accessibilityLayer?: boolean; active?: boolean; includeHidden?: boolean; ... 17 more ...; wrapperStyle?: CSSProperties; }'.

我注意到该组件无法识别 TooltipProps 类型。

谢谢

Answer 1

您也可以在

ResponsiveContainer

中使用这样的代码：

<Tooltip content={<CustomTooltip />} />

您不需要传递您正在调用的调用函数。