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

Posted 2023-02-25

【中文标题】Native Base Picker [React Native] 项目的条件渲染

【英文标题】：Conditional Rendering on Items of Native Base Picker [React Native]

【发布时间】：2017-05-22 05:07:19

【问题描述】：

我正在为我们的产品使用“Native Base”组件，并且做得很好， 但我被困在某一点上，那就是把 Items 放在 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 为假，此代码工作正常，但当this.state.isMultipleDays 为真时，这意味着当它位于else 部分时，我会收到此错误 -

Cannot read property 'props' of undefined

【问题讨论】：

当我试图在“showStartDateFirstHalf()”方法的其他部分返回“null”时，它显示无法读取 null 的属性“prop”。

当代码移到 组件之外并且您呈现 而不是

时是否有效

可以看看Picker的源码吗？

如果我喜欢，那么它适用于“else”部分，但会创建空项目 - showStartDateFirstHalf() if(!this.state.isMultipleDays) return( ）； else 返回( );

如果我尝试将所有项目按如下单独的方法编码出来，那么这根本不起作用。 fillItems() return( )

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

【讨论】：

谢谢它对我有用。我做了一点改进以使它对我有用。 filteredItems.map(item => )