在react native中使用switch语句时,我无法渲染任何内容。

我得到的只是一个空白屏幕,而不是文本输入或选择器元素。
我能够访问整个代码中完成的所有控制台日志。因此,代码确实可以满足要求。

import React, { Component } from 'react';
import { Text, View, TextInput, Picker } from 'react-native';
import data from '../Data.json';


class DynamicElement extends Component {

    renderElements() {
        const elements = [ ...data];
        elements.map(item => {
            console.log(item.elementType);
            console.log(typeof(item.elementType));
            switch(item.elementType) {
                case "text":
                    console.log("text reached here");
                    return (
                        <View style={{flex: 1}}>
                        <TextInput
                        style={styles.textInputStyle}
                        />
                        </View>
                    );

                case "select":
                    console.log("picker reached here")
                    return (
                        <View style={{flex:1}}>
                        <Picker
                        style={styles.selectInputStyle}
                        />
                        </View>
                    );

                default:
                    console.log("test reached here");
                    return <Text>Doesn't work</Text>
            }
        });
    }

    render() {
        return(
            <View style={{flex:1}}>
                {this.renderElements()}
            </View>
        );
    }
}

const styles = {
    textInputStyle: {
        height: 40,
        width: '90%',
        textAlign: 'center',
        borderWidth: 1,
        borderColor: '#028b53',
        borderRadius: 8,
        marginBottom: 15
    },
    selectInputStyle: {
        flex: 1,
        height: 40,
        width: 100
    }
}

export default DynamicElement;

最佳答案

renderElements应该返回组件数组

.....
return elements.map(item => {
    .....
    return <Component..
    .....
})


默认情况下,Javascript函数返回undefined。 React不会为undefined呈现任何内容。check here

10-07 15:06