reactjs / reactjs/react-docgen

Complex composition using `PropTypes.shape`

オープン
#255 コメント 0 件 リアクション 6 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

主要言語
TypeScript
スター
3.8k
フォーク
316
平均マージ
5時間 7分
マージ済み PR(30日)
4

説明

I have a component that looks something along the lines of

import A from './A';
import B from './B';

class MyComponent extends Component {
...
}

MyComponent.propTypes = {
  aProps: PropTypes.shape(A.propTypes),
  bProps: PropTypes.shape(B.propTypes),
  ...
};

Is there a way to make the parser detect that this is a composition rather than simple prop shapes?
I'm doing this because I don't want all the props to live on the wrapper component's scope but to contain each in their own prop, mainly to be able to distinguish what goes where so I don't accidentally pass props that both A and B may have but in reality shouldn't be the same like className, style, children, etc.

I would also like to know if this is possible:

import A from './A';
import VariantOfA from './VariantOfA';

class MyComponent extends Component {
...
}

MyComponent.propTypes = {
  aProps: PropTypes.oneOfType([PropTypes.shape(A.propTypes),PropTypes.shape(VariantOfA.propTypes)])
  ...
};

In this scenario I want to be able to represent with a single prop both A and VariantOfA because essentially they are the same with minor differences in prop types.

I would assume this could be the same for PropTypes.arrayOf and PropTypes.objectOf since they're not that different from PropTypes.oneOfType

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

この issue ではファイル、テスト、または parser のエントリポイントが指定されていないため、まず PropTypes.shape、oneOfType、arrayOf、objectOf が現在どのように処理されているかを追跡してください。要求されているネストされたコンポーネントとバリアントコンポーネントの例を生成されたドキュメントと比較し、実装前に期待される出力とテストを定義してください。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript, react
領域
documentation, tooling
issue の種類
機能追加
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
25/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。