Question

在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;

Answer 1

renderElements应该返回组件数组

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

JavaScript函数默认情况下返回undefined。 React不会为undefined渲染任何内容。check here

无法在React Native中使用switch语句呈现任何内容

1 个答案: