上天然鹼基選擇器的項目條件顯示[陣營本地]

Question

我使用「本土基地」組件我們的產品和良好的去使用此， 但我被困在一個點，它是圍繞把項目在Nativebase選擇器。我的代碼是這樣的

Render方法的代碼 -

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作爲第二項，但將完全刪除該項目。