reactjs - Hva er den riktige typen for Recharts' Legend-innhold?

I en app jeg hjelper til med, er det en gjengivelse av rechart-diagrammer med en forklaring som følger:

<Legend
  content={renderLegend}
/>

renderLegend er definert som følgende funksjon:

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

Denne funksjonen antyder at typen for props.payload bør være noe slikt som:

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

I TS ønsker jeg å type funksjonen renderLegend på en passende måte, men denne typen ser ut til å ikke eksistere. Egenskapen content til Legend-komponenten tar en ContentType, som oversettes til ReactElement | (props: Props) => Element, hvor Props inneholder en payload-egenskap, men hvis jeg prøver å aksessere den, ser jeg at den ikke har en value-attributt. Det er viktig å nevne at dette fungerer som det er, skrevet i Typescript uten typing. Jeg prøver å legge til typing for å få bedre tilgang til dette payload.

Svar #1

Recharts gir typen Payload. Prøv:

interface props {
  payload: Payload[];
}

Ikke glem å importere hvis redigeringsprogrammet ditt ikke gjør det automatisk:

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

Relaterte artikler