Storybook: Especificar um propTable ainda renderiza dois documentos prop

Criado em 22 abr. 2017  ·  3Comentários  ·  Fonte: storybookjs/storybook

Emitido por
_Quarta-feira, 24 de agosto de 2016 às 06:49 GMT_
_Originalmente aberto como https://github.com/storybooks/react-storybook-addon-info/issues/59_


No momento, estou exportando o componente junto com uma versão empacotada ( default export) para que eu possa documentar o componente isoladamente, uma vez que default que está empacotado com várias outras funções de ordem superior não não forneça referência ao propTypes para o livro de histórias react usar.

Por exemplo:

export class SampleComponent extends Component {

}

export default compose(...)(SampleComponent);

Estou usando a importação { SampleComponent } para fins de documentação, no entanto, recebo duas UIs renderizadas para propTables .

"SampleComponent" Component
property    propType    required    default
contextStyles   object  no  {{}}
height  number  no  -
image   string  yes -

"SampleComponent" ComponentNo propTypes defined!

Embora eu esteja especificando as opções para propTables com { propTables: [SampleComponent], inline: true } , recebo as duas versões renderizadas. Existe alguma maneira de desativar o propTable automático para o componente que é renderizado? Parece que é isso que está acontecendo: os propTypes do componente renderizado também estão sendo usados, portanto, undefined pois é exportado após vários envoltórios de função de ordem superior.

Talvez haja uma maneira melhor de conseguir o que eu preciso ...

Obrigado pela sua sugestão.

info bug has workaround

Comentários muito úteis

Comentário por carlosrberto
_Quinta-feira, 26 de janeiro de 2017 às 17:08 GMT_


Acho que propTables deve substituir as propTables padrão

Todos 3 comentários

Comentário por carlosrberto
_Quinta-feira, 26 de janeiro de 2017 às 17:08 GMT_


Acho que propTables deve substituir as propTables padrão

Comentário por FarhadG
_ Segunda-feira, 30 de janeiro de 2017 às 17:41 GMT_


Uma abordagem que descobri ser bastante útil é simplesmente exportar o componente "empacotado" e "desembrulhado" para que eu possa não apenas usá-los para testar facilmente o componente empacotado (e seus aprimoramentos de ordem superior), mas também o componente básico, mas também a capacidade de documentar o componente com o Storybook com bastante facilidade.

Isso resolve o problema de renderização dupla, pois eu uso o componente desembrulhado para aquela parte da documentação e pode ser usado para alavancar outras funcionalidades do Storybook.

Espero que isso seja útil para outras pessoas que estão enfrentando o mesmo problema.

Comentei sobre o problema original desatualizado e, agora que foi encerrado, encontrei esse problema em aberto, então copiarei meu comentário caso seja útil para outra pessoa: nos casos em que um invólucro é inevitável (por exemplo, uma história para um componente interno de SVG que requer um <svg> wrapper de nível superior), você pode especificar uma opção propTablesExclude para colocar na lista negra (todos) os componentes que você não deseja que as tabelas de suporte renderizem para.

Esta página foi útil?
0 / 5 - 0 avaliações