代码之家 › 专栏 › 技术社区 › Guy

为了可读性,将defaultProps放在无状态组件定义之前

react-proptypes reactjs

Guy · 技术社区 · 6 年前

为了可读性,有没有办法把 上下文类型 和 默认道具 在无状态反应组件之前?

type TopBarProps = {
    children: string,
    color: string
};

TopBar.defaultProps = {
    color: "white"
};

TopBar.contextTypes = {
    locale: PropTypes.string,
    colors: PropTypes.object,
    i18n: PropTypes.object,
    fontFamily: PropTypes.object,
    scale: PropTypes.number,
    alignStyle: PropTypes.string,
    navMethods: PropTypes.object,
    token: PropTypes.string,
    arrowName: PropTypes.string,
    materialArrows: PropTypes.object
};

export const TopBar = (props: TopBarProps, context) => {
    const { colors } = context;

    styles = styles || initStyles(context);

    return (
        <View style={styles.container}>
            <View>
                <Menu color={colors.colorFont} />
            </View>
            <View>
                <TopLabel color={props.color}>{props.children}</TopLabel>
            </View>
        </View>
    );
};

2 回复 | 直到 6 年前

Jemi Salo 6 年前

您可以先将它们定义为常量,然后在定义之后将它们设置为组件的字段。因为它们的名称是正确的,所以读者应该非常清楚常量的用途。

const defaultProps = { ... }
const contextTypes = { ... }

export const TopBar = (props: TopBarProps, context) => { ... }

TopBar.defaultProps = defaultProps
TopBar.contextTypes = contextTypes

Anton Harniakou 6 年前

使用定义组件 function 语法,就像这样:

export function TopBar(props: TopBarProps, context) {
    const { colors } = context;

    styles = styles || initStyles(context);

    return (
        <View style={styles.container}>
            <View>
                <Menu color={colors.colorFont} />
            </View>
            <View>
                <TopLabel color={props.color}>{props.children}</TopLabel>
            </View>
        </View>
    );
};

它应该可以工作,因为 hoisting

推荐文章

No Do · 在React中获取错误“未定义PropTypes”

7 年前

Pelicer · React不向组件发送值

7 年前

jess · 使用React propTypes验证在每个级别检查它们时是否很重要?

7 年前

JSilv · 在渲染组件之前,是否反应属性类型警告?

7 年前

allicarn 0x1gene · 从其他模块导入PropType值会导致未定义

7 年前

wsfuller · ESLint在类组件中缺少props验证

7 年前

Patrick Hund · 反应道具类型根据标志不同需要不同道具

7 年前

Erik Hermansen · 如何指定proptype以允许可为null的、必需的prop值?

7 年前

Natrezim · 使用redux表单fieldInputPropTypes在控制台中引发错误

7 年前

Lars · 未定义“Proptypes”

7 年前