来自React,我认为传递道具是一样的,显然它不是?
我有一个登录表单,我想要登录,并使用不同的样式注册按钮。
在我的登录表单中,我有以下方法:
renderButton (type, text) {
if (this.state.loading) {
return <Spinner size="small" />;
}
let btnColors = {
bgColor: colors.whiteText,
textColor: colors.primaryTeal
};
if (type === "signUp") {
btnColors.bgColor = colors.whiteText;
btnColors.textColor = colors.primaryTeal;
} else if (type === "logIn") {
btnColors.bgColor = colors.darkTeal;
btnColors.textColor = colors.whiteText;
}
return (
<Button colors={btnColors} onPress={this.onButtonPress.bind(this)}>
{text}
</Button>
);
}
在Render by:
中调用{this.renderButton("signUp", "SIGN UP")}
Button.js看起来像:
import React from 'react';
import { Text, TouchableOpacity, View, StyleSheet} from 'react-native';
const Button = ({colors, onPress, children }) => {
const styles = StyleSheet.create({
textStyle: {
alignSelf: 'center',
color: colors.textColor,
fontSize: 16,
fontWeight: '900',
paddingTop: 10,
paddingBottom: 10,
},
buttonStyle: {
flex: 1,
backgroundColor: colors.bgColor,
borderRadius: 50
},
});
return (
<TouchableOpacity onPress={onPress} style={styles.buttonStyle}>
<Text style={styles.textStyle}>
{children}
</Text>
</TouchableOpacity>
);
};
export { Button };
错误:
undefined is not an object (evaluating 'colors.textColor')
为什么它不起作用,我如何有条件地将道具作为用于样式的对象传递?
答案 0 :(得分:1)
尝试将组件更改为类组件而不是功能组件,这应该可以解决问题...可以使用胖箭头语法,如下所示:
const HelloWorld = ({name}) => ( <div>{`Hi ${name}`}</div>);