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>
  );
};

此函數建議 props.payload 的類型應該是類似於：

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

在 TS 中，我想正確地為函數 renderLegend 添加類型，但這種類型似乎不存在。Legend 元件的屬性 content 接受一個 ContentType，其對應的類型為 ReactElement | (props: Props) => Element，其中 Props 的確包含一個 payload 屬性，但如果我嘗試訪問它，卻發現它沒有 value 屬性。值得一提的是，這在 TypeScript 中未指定類型時是能夠正常工作的。我正在嘗試添加類型，以便更好地訪問這個 payload。

答案＃1

Recharts 提供了 Payload 類型。試試：

interface props {
  payload: Payload[];
}

如果您的編輯器不會自動匯入，別忘了手動匯入：

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