reactjs - Hur man skapar en React-komponentkarta med korrekt typ


Jag försöker skapa en karta av React-komponenter med TypeScript som returnerar motsvarande komponent baserat på nyckeln, både Item1 och Item2 är React-komponenter.

const componentMap: {[key: string]: JSX. Element} = {
 "Item1": Item1,
 "Item2": Item2,
}

följande är definitionen av item1 och item2

type itemProps = {
  props1: string,
  props2: boolean,
}

export const Item1 = (): JSX.Element => {
  return (<div/>)
}

export const Item2 = (props: itemProps): JSX.Element => {
  return (<div/>)
}

codesandbox-exempel

Men få en avisering

TS2739: Type 'OverridableComponent<BoxTypeMap<{}, "div">>' is 
missing the following properties from type
 'ReactElement<any, any>': type, props, key

Svar #1

Du kan behöva en ReactElement eller ReactNode som typ. Se När man ska använda JSX.Element vs ReactNode vs ReactElement? för när man ska använda vilken.