如何在Map函数react -native中对两个组件进行条件渲染和非条件渲染

Question

我想显示 ItemName，如果 ItemDeliveryStatus==1 则显示禁用的 TextInput 否则在 Map 函数 react-native 中显示可编辑的 TextInput

const [arrayList, setArraylist] = useState([
        { id: 0,  ItemName: 'A',   ItemDeliveryStatus:1 },
        { id: 1, , ItemName: 'B', ItemDeliveryStatus:1 },
        { id: 2,  ItemName: 'C', ItemDeliveryStatus:1  },
        { id: 3,  ItemName: 'D', ItemDeliveryStatus:1  },
      ]);


{
   arrayList.map((items,index)=>{
     return <View>
              <Text >{items.ItemName}</Text>

          if(items.ItemDeliveryStatus== 1){
            return <View> 
                      <TextInput   editable={false} /> 
                   </View>
           }else
           {
                <View> 
                  <TextInput   editable={true} /> 
                </View>
            }

     </View>

Answer 1

您可以使用花括号将表达式嵌入到 JSX 组件中，并使用三元运算符作为条件，因此以下内容应该有效：

{ items.ItemDeliveryStatus == 1 ?
  (<View> 
     <TextInput   editable={false} /> 
   </View>) : 
  (<View> 
     <TextInput   editable={true} /> 
   </View>)
}

它将在组件的返回内工作。
例如：

...
return (
  <View>
    { 
      items.ItemDeliveryStatus == 1 ?
      (<View> 
         <TextInput   editable={false} /> 
       </View>) : 
      (<View> 
         <TextInput   editable={true} /> 
       </View>)
    }
  </View>
)

Here，给你做了点心，有完整代码。