我正在制作一个React原生应用程序,但遇到错误:
意外的文本节点:。文本节点不能是的子级。
我不知道这个错误指向哪个文本节点。我的目标是呈现一个视图数组。
下面是重现错误的最小代码片段:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
function fun() {
const views = [];
const style = {backgroundColor: 'red', height: 100, width: 100};
for (let i=0; i<3; i++) {
views.push(
<View key={i} style={style}/>
)
}
return views;
}
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<View> {fun()} </View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
3条答案
按热度按时间u7up0aaq1#
问题在于,一个应该是JSX组件的函数,或者在本例中返回一个JSX组件的函数,必须是单个JSX元素,而不是JSX元素数组。
因此,您需要添加一个顶级组件,它可能只是一个片段。
bf1o4zei2#
您正在返回一个视图数组。您必须将视图作为子视图返回。请尝试以下操作:
gojuced73#
查看React原生文档https://reactnative.dev/docs/0.65/text
“文本节点不能直接位于
<View>
下。”尝试