Question

我正在为我们的产品使用'Native Base'组件并且很好用，但是我一度陷入困境，而是把物品放在Nativebase Picker中。我的代码就像这样

渲染方法代码 -

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为真时，则表示当它在else部分时，我收到此错误 - < / p>

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

对Native Base Picker项的条件渲染[React Native]

1 个答案: