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
、いくつかの高階関数のラップ後にエクスポートされるためです。
おそらく、私が必要なものを完全に達成するためのより良い方法があります...
提案ありがとう。
FarhadGによるコメント
_ 2017年1月30日月曜日17:41GMT_
私が非常に便利だと思ったアプローチは、「ラップされた」コンポーネントと「ラップされていない」コンポーネントをエクスポートするだけです。これにより、ラップされたコンポーネント(およびその高次の拡張機能)だけでなく、ベアコンポーネントも簡単にテストできます。また、Storybookを使用してコンポーネントを非常に簡単に文書化する機能もあります。
これにより、ドキュメントのその部分にラップされていないコンポーネントを使用し、他のStorybook機能を活用できるため、二重レンダリングの問題が解決されます。
これが同じ問題に直面している他の人にとって役立つことを願っています。
古い元の問題についてコメントしましたが<svg>
ラッパーを必要とするSVG内部コンポーネント)、 propTablesExclude
オプションを指定して、propテーブルをレンダリングしたくないコンポーネント(すべて)をブラックリストに登録できます。にとって。
最も参考になるコメント
carlosrbertoによるコメント
_ 2017年1月26日木曜日17:08GMT_
propTables
がデフォルトのpropTablesを置き換える必要があると思います