gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 11:09:05 26 4
gpt4 key购买 nike

在 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

关于javascript - 无法在 React Native 中使用 switch 语句呈现任何内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54480192/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com