React Native 使用另一个函数循环返回多个 JSX 组件答案

【问题标题】：React Native returning multiple JSX components in loop using another functionReact Native 使用另一个函数循环返回多个 JSX 组件
【发布时间】：2018-12-20 11:33:17
【问题描述】：

我想使用循环返回多个 JSX 组件 (Foodcards)。我使用了另一个函数来返回循环内的组件。但是该函数没有返回组件。 Foodcards 是一个将姓名和评分作为输入的组件。当组件 (Foodcards) 从 renderMenu() 返回时，代码可以正常工作。

import React, { Component } from 'react'
import Dimensions from 'Dimensions'
import { Actions, ActionConst } from 'react-native-router-flux'
import * as firebase from 'firebase'


import GLOBALS from '../global/Globals';
import Background from '../Background.js';
import Foodcards from '../Foodcards.js';

const DEVICE_WIDTH = Dimensions.get('window').width;

import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
    ScrollView,
    TextInput,
    ToastAndroid,
} from 'react-native'

export default class Foodview extends Component {

    returnFoodCard(text1, text2) {
        return <Foodcards Name={text1} Rate={text2} />
    }

    renderMenu() {
        var fetchedJSON = this.props.dishes;
        var fetchedString = JSON.stringify(fetchedJSON);
        var i = 0;
        var arrayOfLines = fetchedString.split(",")
        for (i = 0; i < arrayOfLines.length; i++) {
            var arr = arrayOfLines[i].split('$');
            ToastAndroid.show(arr[1], ToastAndroid.SHORT);
            this.returnFoodCard(this, arr[1], arr[2]);
        }
    }    

    render() {

        return (


            <View style={styles.Container}>

                {this.renderMenu()}

            </View>



        );
    }
}


const styles = StyleSheet.create({

    Container: {
        top: 5,
        flex: 1,
        backgroundColor: "white",
    },

    btnStyle: {
        backgroundColor: GLOBALS.linkTextColor,
        alignItems: 'center',
        top: 400,
        left: DEVICE_WIDTH / 2 - ((DEVICE_WIDTH - 250) / 2),
        paddingLeft: 8,
        width: DEVICE_WIDTH - 250,
        height: 30,
    },

    btnText: {
        left: -5,
        top: 5,
        color: "white"
    },

});

【问题讨论】：

标签： javascript reactjs function react-native return

【解决方案1】：

问题是你没有从renderMenu 方法返回任何东西。

试试这样的：

renderMenu() {
    var fetchedJSON = this.props.dishes;
    var fetchedString = JSON.stringify(fetchedJSON);
    var i = 0;
    var arrayOfLines = fetchedString.split(",")
    return arrayOfLines.map((line) => {
        var arr = line.split('$');
        ToastAndroid.show(arr[1], ToastAndroid.SHORT);
        return this.returnFoodCard(arr[1], arr[2]);
    });
}

另外，returnFoodCard 似乎接受了两个参数，而您传入了三个...

【讨论】：