对本机基本选择器的项目进行条件渲染[React Native] [英] Conditional Rendering on Items of Native Base Picker [React Native]

问题描述

我将"Native Base"组件用于我们的产品，并且在此方面做得很好， 但我只停留在一点，就是将项放入Nativebase Picker中.我的代码是这样的

I’m using ‘Native Base’ components for our product and going good with this, but I’m stuck at one point and it is around putting Items in Nativebase Picker. My code is like this

渲染方法代码-

render(){

  return (

      <View style={{marginTop: 20,  flexDirection:'row', flexWrap:'wrap', justifyContent:'space-around', alignItems:'center'}}>

        <View style={{flex:1, justifyContent:'center', alignItems:'flex-end' }}>
          <Button
             style={{ backgroundColor: '#6FAF98', }}
             onPress={this._showDateTimePicker}

             >
             <Text>Select Date</Text>
          </Button>
        </View>

        <View style={{flex:1, justifyContent:'center', alignItems:'stretch'}}>
          <Picker
              style={{borderWidth: 1, borderColor: '#2ac', alignSelf:'stretch'}}
              supportedOrientations={['portrait','landscape']}
              iosHeader="Select one"
              mode="dropdown"
              selectedValue={this.state.leaveType}
              onValueChange={(value)=>this.setState({leaveType:value,})
                //this.onValueChange.bind(this)
              }>

              <Item label="Full Day" value="leave1" />
              {
                this.showStartDateFirstHalf() // Here I want to show this picker item on the basis of a condition 
              }
              <Item label="2nd half" value="leave3" />
         </Picker>
        </View>
        <DateTimePicker

          isVisible={this.state.isStartDatePickerPickerVisible}
          onConfirm={this._handleDatePicked}
          onCancel={this._hideDateTimePicker}
          mode='date'
        />

      </View>



    );


}

showStartDateFirstHalf()
{
    if(!this.state.isMultipleDays)
    {
      return(
          <Item label="1st Half" value="leave2" />
      );
    }
}

因此，如果this.state.isMultipleDays为false，则此代码可以正常工作，但是，当this.state.isMultipleDays为true时，则意味着当它位于else部分时，我会收到此错误-

So, this code is working fine if this.state.isMultipleDays is false, But when this.state.isMultipleDays is true, it means when it is in else part then i'm getting this error -

Cannot read property 'props' of undefined

推荐答案

我认为对此有一个更简单的答案.代替创建单独的showStartDateFirstHalf()函数，请尝试以下操作:

I think there's an easier answer to this. Instead of creating the separate showStartDateFirstHalf() function try this:

render() {

  const pickerItems = [
    {
      label: 'Full Day',
      value: 'leave1',
    },
    {
      label: '1st Half',
      value: 'leave2',
    },
    {
      label: '2nd Half',
      value: 'leave3',
    },
  ];

  const filteredItems = pickerItems.filter(item => {
    if (item.value === 'leave2' && this.state.isMultipleDays) {
      return false;
    }
    return true;
  });

  // The 'return' statement of your render function
  return (
    ...
    <Picker ...>
      {(() => 
        filteredItems.map(item => 
          <Item label={item.label} value={item.value} />
      )()}
    </Picker>
    ...
  );
}

这样，您已经具有在渲染周期的return语句之前确定的项目列表.同样，如果不满足条件，使用filter代替map不仅会给您null作为第二项，还会完全删除该项.

That way, you already have a list of items that is determined before the return statement of the render cycle. Also the use of filter instead of map will not just give you null as the second item if the condition is not met, but will remove the item altogether.

这篇关于对本机基本选择器的项目进行条件渲染[React Native]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！