时间戳

首页 > 解决方案 > rechart 的 Legend 内容的正确类型是什么？

reactjs - rechart 的 Legend 内容的正确类型是什么？

问题描述

在我正在帮助的应用程序中，有一个rechart带有图例的图表渲染，如下所示：

<Legend
  content={renderLegend}
/>

renderLegend定义为以下函数：

const renderLegend = (props) => {
  const { payload } = props;

  return (
    <ul>
      {
        payload.reverse().map((entry, index) => (
          <li key={`item-${index}`}>
            <span style={{backgroundColor: entry.color}} />
            <span>{entry.payload.value}</span>&nbsp;{entry.value}
          </li>
        ))
      }
    </ul>
  );
};

这个函数表明 for 的类型props.payload应该是这样的：

interface props {
  payload: {
    color: string;
    value: string;
    payload: {
      value: string;
    }
  }[];
}

在 TS 中，我想renderLegend适当地键入函数，但这种类型似乎不存在。组件的属性content采用LegendaContentType转换为包含属性的ReactElement | (props: Props) => Element位置Props ，但payload如果我尝试访问它，我发现它没有value属性。值得一提的是，它按原样工作，用 Typescript 编写，无需打字。我正在尝试添加打字以更好地访问 this payload。

标签： reactjstypescriptrecharts

解决方案

Recharts 提供了 Payload 类型。尝试：

interface props {
  payload: Payload[];
}

如果您的编辑器没有自动导入，请不要忘记导入：

import type { Payload } from "recharts/types/component/DefaultLegendContent";

推荐阅读