对本机基本选择器的项目进行条件渲染[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屋!