web-dev-qa-db-ja.com

propTypesでスタイルを宣言する方法は？

forbid-prop-types ルールを有効にすると、eslintはstyle: React.PropTypes.objectの使用を禁止し、shapeの使用が推奨されます。

しかし、この目的のために、このように利用可能なすべてのプロパティを定義することは本当に必要ですか？

DEMO.propTypes = {
    style: React.PropTypes.shape({
        color: React.PropTypes.string,
        fontSize: React.PropTypes.number,
        ...
    })
};

定義コードが多すぎます！

react-nativeeslint
47
Howard

React NativeにはViewPropTypesが含まれるようになり、View.propTypes.style。使用例：

import { ViewPropTypes } from 'react-native';

MyComponent.propTypes = {
  style: ViewPropTypes.style
};
44
NiFi
View.propTypes.style

または

Text.propTypes.style

次のようになります。

DEMO.propTypes = {
    style: Text.propTypes.style,
    ...
};

https://facebook.github.io/react-native/releases/0.21/docs/style.html#pass-styles-around

31
tiagob

1つの可能性は、次のように react-style-proptype パッケージを使用することです：

import stylePropType from 'react-style-proptype';

MyComponent.propTypes = {
  style: stylePropType,
};
20
David Weldon

次のように単純なコードを使用します。

PropTypes.oneOfType([PropTypes.object, PropTypes.array])

したがって、これにコードを適用できます。

DEMO.propTypes = {
    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
};

RN> 0.57でテスト済み。

4
Jeff Gu Kang

つかいます ViewPropTypes.style。 View.propTypesは廃止されました

3
Matt Stow

@ jalal246回答の拡張：

PropTypes.objectOf(PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
]))

これは、他のパッケージを使用せずにWebスタイルに使用できます（React-nativeの他の回答を参照）。

1
Vivek

私は通常PropTypes.objectOf(PropTypes.string)を使用します。すべてのCSSスタイルを定義する必要はありません。

0
Jalal