Estoy tratando de crear una aplicación nativa de reacción simple y me enfrento al siguiente problema en mi código. Si elimino el componente <Link> y mantengo el componente <Text> , el error desaparecerá. Si trato de mantener el componente <Link> y elimino el componente <Text> , vuelve el error.
¿Puede alguien por favor ayudarme con esto?
import * as React from "react"; import { View, Text } from "react-native"; import { Link } from "react-router-native"; function Home() { return ( <View> <Text>Welcome!</Text> <Link to="/profile">Visit your profile</Link> </View> ); }Error: React.Children.only esperaba recibir un solo elemento secundario de React.
En v6 react-router , The <Link> debe tener exactamente 1 elemento. Pero en su caso, The text Visit , your y profile se asumen como 3 nodos de texto .
Para convertirlo en un elemento, simplemente puede envolverlo en <Text> . Entonces, <Link> tendrá solo un elemento <Text> pero tiene 3 nodos de texto dentro, lo que no es un problema para <Link>
function Home() { return ( <View> <Text>Welcome!</Text> <Link to="/profile"> <Text>Visit your profile<Text> </Link> </View> ); }Los documentos react-router V6 dicen que <Link> representa un TouchableHighlight y debe tener al menos (y la mayoría) un hijo y también debe estar envuelto en un elemento <View> . Cambie su implementación de la siguiente manera.
import * as React from 'react'; import {View, Text} from 'react-native'; import {Link} from 'react-router-native'; function Home() { return ( <View> <Text>Welcome!</Text> <Link to="/profile"> <Text>Visit your profile</Text> </Link> </View> ); }Si desea anular el estilo y el comportamiento predeterminados, consulte la referencia de Props para TouchableHighlight .