Storybook: La spécification d'un propTable rend toujours deux documents prop

Créé le 22 avr. 2017  ·  3Commentaires  ·  Source: storybookjs/storybook

Émission par FarhadG
_Mercredi 24 août 2016 à 06:49 GMT_
_Ouvert à l'origine comme https://github.com/storybooks/react-storybook-addon-info/issues/59_


J'exporte actuellement le composant avec une version encapsulée ( default export) afin que je puisse documenter le composant de manière isolée, car le default qui est encapsulé avec plusieurs autres fonctions d'ordre supérieur ne Ne fournissez pas de référence au propTypes pour que react-storybook utilise.

Par example:

export class SampleComponent extends Component {

}

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

J'utilise l'importation { SampleComponent } à des fins de documentation, cependant, j'obtiens deux interfaces utilisateur rendues pour le propTables .

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

"SampleComponent" ComponentNo propTypes defined!

Même si je spécifie les options pour le propTables avec { propTables: [SampleComponent], inline: true } , j'obtiens les deux versions rendues. Un moyen de désactiver le propTable automatique pour le composant rendu ? Il semble que ce soit ce qui se passe : les propTypes du composant rendu sont également utilisés, d'où le undefined puisqu'il est exporté après plusieurs encapsulations de fonctions d'ordre supérieur.

Peut-être qu'il y a un meilleur moyen d'atteindre ce dont j'ai besoin en somme...

Merci pour votre suggestion.

info bug has workaround

Commentaire le plus utile

Commentaire de carlosrberto
_Jeudi 26 janvier 2017 à 17:08 GMT_


Je pense que propTables devrait remplacer les propTables par défaut

Tous les 3 commentaires

Commentaire de carlosrberto
_Jeudi 26 janvier 2017 à 17:08 GMT_


Je pense que propTables devrait remplacer les propTables par défaut

Commentaire de FarhadG
_Lundi 30 janvier 2017 à 17h41 GMT_


Une approche que j'ai trouvée très utile consiste simplement à exporter les composants "emballés" et "déballés" afin que je puisse non seulement les utiliser pour tester facilement le composant enveloppé (et ses améliorations d'ordre supérieur) mais aussi le composant nu, mais également la possibilité de documenter le composant avec Storybook assez facilement.

Cela résout le problème de double rendu car j'utilise le composant déballé pour cette partie de la documentation et peut être utilisé pour tirer parti d'autres fonctionnalités de Storybook.

J'espère que cela sera utile pour d'autres qui rencontrent le même problème.

J'ai commenté le problème d'origine obsolète , et maintenant qu'il est fermé, j'ai trouvé ce problème ouvert, je vais donc copier mon commentaire au cas où cela serait utile pour quelqu'un d'autre : dans les cas où un wrapper est inévitable (par exemple, une histoire pour un composant interne à SVG qui nécessite un wrapper <svg> niveau supérieur), vous pouvez spécifier une option propTablesExclude pour mettre en liste noire (tous) le ou les composants dont vous ne voulez pas que les tables d'accessoires soient rendues pour.

Cette page vous a été utile?
0 / 5 - 0 notes