根据数组视图中的选定项渲染组件

Question

我正在做一个项目，我需要提供一个数组中的项目列表，其中一个项目被设置为默认值。如果用户单击另一个项目，复选标记将从默认项目移动到所选项目。

例如，如果我有数组 [default: "Saab", "Volvo", "BMW"]。然后，如果我单击 Volvo，它会采用默认属性。我已经过滤掉数组并将其更新为新选择的项目。一旦它们已经呈现，我在视图组件上显示它时遇到问题。我的过滤函数是

selectItem(val){
  var currentDefault = this.state.vehicleList.find(function(element, index) {
    return element.default == true;
  });

  var currentVehicle = this.state.vehicleList.indexOf(currentDefault);
  var selectedItem = this.state.vehicleList.indexOf(val);

  if (currentVehicle != selectedItem){
    this.state.vehicleList[currentVehicle].default = false;
    this.state.vehicleList[selectedItem].default = true;
    this.state.pickedVehicle = this.state.vehicleList[selectedItem];
  } else {
    console.log('same vehicle');
  }   
}

我是否应该将项目置于状态以使其发生变化？

我在下面添加渲染功能。

_renderItem({item, key}) {

      const car = (<Icon name="car" size={16} color="grey" />)
      const bicycle = (<Icon name="bicycle" size={16} color="grey" />)
     color="black" />)
      const check = (<Icon name="check-square" size={30} color="green" />)



                        if (item.type == 'car'){
                            return (
                              <TouchableHighlight onPress={() => this.selectItem(item)} underlayColor={'transparent'}>
                                <LinearGradient key={key} style={{justifyContent: 'center', borderRadius: 30, width: 180, height: 120, alignSelf: 'center'}} colors={['#ff00ff', '#0066ff']}>
                                    {renderIf(item.default == true)(
                                            <Text key={key} style={{alignSelf: 'flex-end', backgroundColor: 'rgba(0,0,0,0)', marginRight: 5}}> 
                                              {check}
                                             </Text>
                                        )}
                                    <View style={{alignSelf: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: 60/2, backgroundColor: 'white'}}>
                                        <Text style={{alignSelf: 'center'}}>
                                        {car} 
                                        </Text>
                                    </View>
                                    <Text style={{marginTop: 5, fontWeight: 'bold', marginTop: 5, color: 'white', fontSize: 12, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
                                      {item.make} {item.model} {item.year}
                                    </Text>
                                    <Text style={{fontWeight: 'bold', color: 'white', fontSize: 12, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
                                     {item.licensePlate} 
                                    </Text>
                                </LinearGradient>
                              </TouchableHighlight>
                              )
                          }
                          if (item.type == 'bicycle') {
                            return (
                                <LinearGradient key={key} style={{justifyContent: 'center', borderRadius: 30, width: 180, height: 120, alignSelf: 'center'}} colors={['#99cc00', '#000099']}>
                                      {renderIf(item.default == true)(
                                            <Text key={key} style={{alignSelf: 'flex-end', backgroundColor: 'rgba(0,0,0,0)', marginRight: 5}}> 
                                              {check}
                                             </Text>
                                        )}
                                        <View style={{alignSelf: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: 60/2, backgroundColor: 'white'}}>
                                            <Text style={{alignSelf: 'center'}}>
                                            {bicycle} 
                                            </Text>
                                        </View>
                                        <Text style={{marginTop: 5, fontWeight: 'bold', marginTop: 5, color: 'white', fontSize: 12, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
                                          {item.make} {item.model} {item.year}
                                        </Text>
                                        <Text style={{fontWeight: 'bold', color: 'white', fontSize: 12, alignSelf: 'center', backgroundColor: 'rgba(0,0,0,0)',}}>
                                         {item.licensePlate} 
                                        </Text>
                                </LinearGradient>

                              )
                            }

我是如何添加组件的

{this.state.vehicleList[index].default  && (
                                            <Text key={key} style={{alignSelf: 'flex-end', backgroundColor: 'rgba(0,0,0,0)', marginRight: 5}}> 
                                              {check}
                                             </Text>
                                        )}

Answer 1

由于对何时在项目旁边显示复选图标有限制，您可以在渲染时将此条件与图标一起添加。比如你需要根据那个条件显示Icon组件，你应该这样添加。

{this.state.vehicleList[indexOfTheItem].default && (<Icon/>)}

仅当 this.state.vehicleList[item].default 为 true

时才会呈现图标

组件在状态改变时再次渲染。当您更新每辆车辆的默认状态时，您可以使用相应车辆的布尔值作为旁边的条件。

根据数组视图中的选定项渲染组件

render component based on selected item in array view

javascript

arrays

render

react-native