在 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