无法在 React Native 中使用 switch 语句渲染任何内容



在 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

相关内容

  • 没有找到相关文章

最新更新