React Native-有条件检查prop是否具有样式价值

时间:2019-03-06 15:43:06

标签: reactjs react-native

我正在尝试对组件应用宽度-仅在可用宽度道具的情况下-却不知道我要去哪里-有人可以指出我的正确方向吗?

class ButtonHomeNav extends React.Component {

render() {
getMinWidth = () => {

 if(this.props.minWidth.length > 0) {
   console.warn('nob jockey');
  return {

    minWidth:this.props.btMinWidth
  }
 }
}
return (
  <View style={[AppStyles.buttonRect, getMinWidth()] } >
    <View style={[AppStyles.buttonRectWrap, this.props.darkCol && AppStyles.darkCol]}>
      <Image style={AppStyles.buttonRectIcon} source={this.props.buttonIcon} />
      <Text style={[AppStyles.buttonRectText, this.props.darkCol && AppStyles.darkColText]}>{this.props.buttonTxt}</Text>
    </View >
  </View>
);

} }

1 个答案:

答案 0 :(得分:1)

您应检查minWidth是否为null/undefined。您还使用了两个不同的道具minWidthbtMinWidth

getMinWidth = () => {
    if(this.props.minWidth) {
        console.warn('nob jockey');
        return {
            minWidth: this.props.minWidth
        };
    } else
        return {};
}

您也可以不带功能使用它:

<View style={[
    AppStyles.buttonRect,
    this.props.minWidth && {minWidth: this.props.minWidth},
]}>