Question

我是反应原生的新蜜蜂。如果我一再提出问题，请原谅我。我问的是相关的问题，因为之前就这个主题提出的问题对我没有帮助。我想在JSON响应的基础上创建动态复选框，我已经在数组中收集了数据，下面是代码。

sellablePartsCategory = [];

sellablePartsCategory包含数据

sellablePartsCategory = ["Brake", "Suspension", "Engine", "Tyre"]

renderParts(){
    for(let i=0; i<sellablePartsCategory.length; i++){
      return(
        <CheckBoxComponent 
            title={sellablePartsCategory[i]}
            checked= {true} /> );
    }
}

 render(){
 <View>
    <Text> {sellablePartsCategory} </Text>
      {this.renderParts()}
 </View> }

我知道return语句正在打破for循环并使其只运行一次。它给了我数组的零索引值，然后循环得到中断。我不知道如何解决问题。 CheckBoxComponent.js是

import React, { Component } from 'react';                         
import {TextInput, StyleSheet, View, Text} from 'react-native';   
import { CheckBox, ListItem, List } from 'react-native-elements';  
const CheckBoxComponent = ({title, checked}) => {
return (
    <CheckBox
        title={title}
        checkedColor='#0D4A8E'
        checked={checked}
        />
);};

export { CheckBoxComponent };

Answer 1

在renderParts()方法中，只需返回一次，就可以返回列表中的所有复选框。请尝试以下代码：

renderParts(){
    let checkBoxComponentList = [];
    for(let i=0; i<sellablePartsCategory.length; i++){
        checkBoxComponentList.push(<CheckBoxComponent 
            title={sellablePartsCategory[i]}
            checked= {true} />);
    }
    return checkBoxComponentList;
}

如何在反应原生中创建JSON响应的动态复选框？

1 个答案: