Question

出于可读性考虑，有没有一种方法可以将 contextTypes 和 defaultProps 放在无状态React组件之前？

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>
    );
};

Answer 1

您可以先将它们定义为常量，然后在定义后将它们设置为组件的字段。由于它们是适当命名的，因此对于读者来说，这些常量将被用作什么应该很明显。

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

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

TopBar.defaultProps = defaultProps
TopBar.contextTypes = contextTypes

Answer 2

使用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

，它应该可以工作

为了便于阅读，将defaultProps放在无状态组件定义之前

2 个答案: