本机基本选择器 [React Native] 项的条件渲染

Question

我正在为我们的产品使用'Native Base'组件，并且对此感到满意，但我一度陷入困境，它是关于将项目放入 Nativebase 选择器。我的代码是这样的

渲染方法代码 -

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是假的，这段代码工作正常，但是当this.state.isMultipleDays为真时，这意味着当它处于else部分时，我会收到此错误 -

Cannot read property 'props' of undefined

Answer 1

我认为有一个更简单的答案。与其创建单独的 showStartDateFirstHalf(( 函数，请尝试以下操作：

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作为第二项，而且会完全删除该项目。