Storybook: propTableを指定しても、2つのpropドキュメントがレンダリングされます

作成日 2017年04月22日  ·  3コメント  ·  ソース: storybookjs/storybook

FarhadGによる
_ 2016年8月24日水曜日06:49GMT_
_元々はhttps://github.com/storybooks/react-storybook-addon-info/issues/59_として開かれていました


現在、コンポーネントをラップされたバージョン( default export)と一緒にエクスポートしているので、コンポーネントを個別に文書化できます。他のいくつかの高階関数でラップされたdefaultはそうではないからです。使用するreact-storybookのpropTypesへの参照を提供しません。

例えば:

export class SampleComponent extends Component {

}

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

ドキュメントの目的で{ SampleComponent }インポートを使用していますが、 propTables用に2つのレンダリングされたUIを取得します。

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

"SampleComponent" ComponentNo propTypes defined!

propTablesのオプションを{ propTables: [SampleComponent], inline: true }で指定しているのに、両方のレンダリングバージョンを取得します。 レンダリングされるコンポーネントの自動propTableを無効にする方法はありますか? それが起こっているようです:レンダリングされたコンポーネントのpropTypesも使用されているため、 undefined 、いくつかの高階関数のラップ後にエクスポートされるためです。

おそらく、私が必要なものを完全に達成するためのより良い方法があります...

提案ありがとう。

info bug has workaround

最も参考になるコメント

carlosrbertoによるコメント
_ 2017年1月26日木曜日17:08GMT_


propTablesがデフォルトのpropTablesを置き換える必要があると思います

全てのコメント3件

carlosrbertoによるコメント
_ 2017年1月26日木曜日17:08GMT_


propTablesがデフォルトのpropTablesを置き換える必要があると思います

FarhadGによるコメント
_ 2017年1月30日月曜日17:41GMT_


私が非常に便利だと思ったアプローチは、「ラップされた」コンポーネントと「ラップされていない」コンポーネントをエクスポートするだけです。これにより、ラップされたコンポーネント(およびその高次の拡張機能)だけでなく、ベアコンポーネントも簡単にテストできます。また、Storybookを使用してコンポーネントを非常に簡単に文書化する機能もあります。

これにより、ドキュメントのその部分にラップされていないコンポーネントを使用し、他のStorybook機能を活用できるため、二重レンダリングの問題が解決されます。

これが同じ問題に直面している他の人にとって役立つことを願っています。

古い元の問題についてコメントしましたが<svg>ラッパーを必要とするSVG内部コンポーネント)、 propTablesExcludeオプションを指定して、propテーブルをレンダリングしたくないコンポーネント(すべて)をブラックリストに登録できます。にとって。

このページは役に立ちましたか?
0 / 5 - 0 評価