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

本文介绍了对本机基本选择器的项目进行条件渲染[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.