reactjs - Typescript-problem med Storybook-migrering till CSF

Efter att ha migrerat över 50 berättelser till CSF, visade de sig inte i storybook. Efter lite efterforskning upptäckte jag att jag var tvungen att skicka komponentnyckeln till standardexporten med komponenten som dess värde.

export default {
title: "Title"
component: MyComponent
}

problemet är att alla mina komponenter använder Typescript och av någon anledning finns det ett fel:

Standardexporten av modulen har eller använder det privata namnet 'MyComponentProps'.ts(4082)

All hjälp med detta skulle vara mycket uppskattad.

Svar #1

Du kan antingen ändra deras props till type istället för interface, som @Mayank föreslog, eller så kan du helt enkelt se till att exporta deras props.

Exempel :

interface Props {
  name: string;
}

const ({ name }: Props) => {
  return <div>{name}</div>;
}

Denna kod kommer att ge TS4082 som du får om du försöker skapa en story för denna komponent.

Om du exporterar gränssnittet:

export interface Props {
  name: string;
}

const ({ name }: Props) => {
  return <div>{name}</div>;
}

felet kommer att försvinna.

Svar #2

Jag antar att du har definierat ett gränssnitt för MyComponentProps. Försök att ändra det till en typdeklaration. Det fixade det för mig.

Relaterade artiklar