web-dev-qa-db-ja.com

ReactJSでnullプロップタイプを指定する方法

Nullまたは不変マップのいずれかであるReactJSコンポーネントの小道具を持っています。

私が書いた場合、ウィジェットの下部に：

MyComponent.propTypes = {
    myMap: React.PropTypes.instanceOf(Immutable.Map)
};

私はこれをnull、未定義、またはMapの可能性に開放しています。

これを必須にし、タイプをnullまたはマップのみにするにはどうすればよいですか？

https://facebook.github.io/react/docs/typechecking-with-proptypes.html

この例は表示されていますが、自分のニーズに合わせて構文を調整する方法や、それが可能かどうかわかりません。

編集：プロパティがnullの場合、それはまだそこにありますが、未定義とは、完全に含まれていないことを意味します。

例えば：

<Component id={1} data={null} />
<Component id={2} data={Immutable.Map()} />
<Component id={3} />
javascriptreactjsnullnullableimmutable.js
22
user1261710

この要件は、現在のバージョンのReactではサポートされていないようです。

詳細は React issue＃2166 を参照してください。この問題では、isRequiredOrNullに加えてisRequiredプロパティの可能性について説明します。 最終行 ：

PropTypesがさらに変更されるとは思いません。フローは最近はるかに成熟してきており、Reactチームから聞いたところによると、これは型チェックの長期的な解決策です。これにより、PropTypeが同じ「互換性」バケットに入れられます。優先順位-createClassやReactアドオンなど）は引き続きサポートされますが、新機能の追加やAPIの変更を行わずに、バグ修正とパフォーマンスの向上のみがサポートされます。

つまり、より高度な型チェックが必要な場合は、代わりに Flow を使用します。

9
Timo

PropTypes.oneOf([null]).isRequiredを使用することができます。 nullを許可し、それ以外は許可しません。それを他のタイプと組み合わせることができます：

PropTypes.oneOfType([
  PropTypes.string.isRequired,
  PropTypes.oneOf([null]).isRequired,
]).isRequired

編集：プロップタイプ15.7.2を使用してnullプロップを指定すると、このプロップタイプが失敗しました。 isRequiredを使用しないだけで、未定義とnullの両方を許可するように戻しました。

8
Lars Nyström

私は同様の問題を抱えていたので、ここにたどり着きました。自分にとって十分な解決策を見つけたので、共有したいと思います。

つまり、.isRequiredとdefaultPropsをnullに設定します。

私はこのようなものが欲しかった：

// this won't work, because `PropTypes.null` doesn't exists!
MyComponent.propTypes = {
  item: PropTypes.oneOfType([ItemPropTypesShape, PropTypes.null]).isRequired,
};

// this also won't work!
MyComponent.propTypes = {
  item: PropTypes.oneOfType([ItemPropTypesShape, PropTypes.instanceOf(null)]).isRequired,
};

Propが必要な場合、nullは常にエラーとして扱われます。

私はこれをやった：

MyComponent.propTypes = {
  item: ItemPropTypesShape,
};

MyComponent.defaultProps = {
  item: null,
};

PropTypesがすべて揃っていれば、これでうまくいきます。

2
kamyl

PropTypes.instanceOf(null)は動作するようです。

2
wowkalucky

遅すぎるかもしれませんが、私にとってこの作業は、カスタムpropTypeです。反応ドキュメントの詳細： https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes

static propTypes = {
  myMap: function(props, propName, componentName) {
    if (props[propName] !== null && !(props[propName] instanceof Immutable.Map)) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to `' + componentName + '`. Expected null or Immutable.Map, but received ' + typeof props[propName] + '. Validation failed.'
      )
    }
  },
}
0
TomasDisk