React原生：意外的文本节点：,文本节点不能是< View>

csga3l58 于 2023-03-09 发布在 React

关注(0)|答案(3)|浏览(195)

我正在制作一个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',
  },
});

react-native

来源：https://stackoverflow.com/questions/72072640/react-native-unexpected-text-node-a-text-node-cannot-be-a-child-of-a-view

3条答案

按热度按时间

u7up0aaq1#

问题在于，一个应该是JSX组件的函数，或者在本例中返回一个JSX组件的函数，必须是单个JSX元素，而不是JSX元素数组。
因此，您需要添加一个顶级组件，它可能只是一个片段。

function fun() {
  const views = []

  const style = { backgroundColor: "red", height: 100, width: 100 }

  for (let index = 0; index < 3; index++) {
    views.push(<View key={index} style={style} />)
  }
  return <>{views}</>
}

赞(0）回复(0）举报 2023-03-09

bf1o4zei2#

您正在返回一个视图数组。您必须将视图作为子视图返回。请尝试以下操作：

function fun() {
  const style = { backgroundColor: "red", height: 100, width: 100 };

  return [0, 1, 2].map(() => <View key={i} style={style} />);
}

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',
  },
});

赞(0）回复(0）举报 2023-03-09

gojuced73#

查看React原生文档https://reactnative.dev/docs/0.65/text
“文本节点不能直接位于<View>下。”
尝试

<View>
   <MyAppText>
     Text styled with the default font for the entire application
   </MyAppText>
   <MyAppHeaderText>Text styled as a header</MyAppHeaderText>
</View>

赞(0）回复(0）举报 2023-03-09

我来回答

React原生：意外的文本节点：,文本节点不能是< View>

3条答案

相关问题

热门标签

最新问答