Búsqueda de sitios web

reactjs - Storybook y Typescript - Args totalmente personalizados


Según la documentación de Storybook, puedes hacer esto:

const TableStory = ({ data, ...args}) => (
  <Table {...args}>
    {data.map((row) => (
      <TR>
        {row.map((item) => (
          <TD>{item}</TD>
        ))}
      </TR>
    ))}
  </Table>
);

export const Numeric = TableStory.bind({});
Numeric.args = {
  //👇 This arg is for the story component
  data: [[1, 2, 3], [4, 5, 6]],
  //👇 The remaining args get passed to the `Table` component
  size: 'large',
};

Necesito hacer algo similar. Esta es mi plantilla normal:

const Template: ComponentStory<typeof StatsDisplay> = (args) => <StatsDisplay {...args} />;

Quiero que sea algo así:

const Template: ComponentStory<typeof StatsDisplay> = ({data, ...args}) => <StatsDisplay {...args} />;

Y luego haré cosas con los datos.

Así que TypeScript no me permite hacer esto. Obtengo: La propiedad 'id' no existe en el tipo 'IProps'.

Y ESLint me da 'id' falta en la validación de props.

No puedo encontrar ninguna información sobre esto en ningún lugar de internet. Espero que alguien pueda ayudarme.

Artículos relacionados