如何在propTypes中声明样式

启用禁止道具类型规则后，eslint禁止我使用style: React.PropTypes.object，建议使用shape。

但是，真的有必要像这样定义所有可用的属性吗？

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

定义代码太多！

React Native现在包含ViewPropTypes，它将取代View.propTypes.style。用法示例：

import { ViewPropTypes } from 'react-native';
MyComponent.propTypes = {
  style: ViewPropTypes.style
};

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-围绕的样式

一种可能性是使用react风格的proptype包，如下所示：

import stylePropType from 'react-style-proptype';
MyComponent.propTypes = {
  style: stylePropType,
};

使用下面的简单代码。

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

因此，您可以将您的代码应用于此。

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

在RN>0.57中测试。

使用ViewPropTypes.style。View.propTypes已被弃用

快速且肮脏/破解

扩展@jalal246答案：

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

这可以用于web样式（请参阅React native的其他答案），而不必使用其他包。

由于前面的一些答案是不复杂的，所以我将在这里分享我的解决方案。

实际上，您可以简单地导入原始类型，如ViewStyle、TextStyle、ImageStyle、FlexStyle&来自react native的CCD_ 12。

例如：

import React from 'react';
import { TouchableOpacity, ViewStyle } from 'react-native';
interface IProps {
    style?: ViewStyle
}
<TouchableOpacity style={[props.style]}>
    ...
</TouchableOpacity>

备注：如果您使用的是支持TypeScript的第三方库，那么也应该有相关的样式属性，就像上面的例子一样。

我通常使用PropTypes.objectOf(PropTypes.string)，不需要定义所有css样式。

有两种可能性。第一个，我更喜欢，是使用react中的ViewPropTypes。另一个使用PropTypes的是：

Component.propTypes = {
    textStyles: PropTypes.oneOfType([
        PropTypes.object,
        PropTypes.number
    ])
}

您可能会问"如果样式只是一个对象，为什么要使用PropTypes.number？"答案是react原生团队进行了一些优化，缓存样式表并简单地发送缓存的ID。

使用JSDoc有一种简单的方法。

/**
   * @typedef Props
   * @prop {React.CSSProperties} style
   */
/**
 * some component
 * @augments {Component<Props, State>}
 */
 export default class SomeRandomClass extends React.Component { }

将上面的JSDoc添加到您的react组件将使VS代码能够建议所有可能的CSS属性。

相关内容

最新更新

热门标签：