tengo un componente principal donde he importado un componente, así que quiero pasar algunos datos de ese componente importado al componente principal y mostrarlo. aquí hay un código de ejemplo: este es mi archivo principal:
import React from "react"; import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native"; import TestComponent from "../components/TestComponent"; function TestScreen(props) { return ( <View> <TestComponent /> <Text>{location}</Text> </View> ); } export default TestScreen;y este es el componente importado:
import React from "react"; import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native"; function TestComponent(props) { const [location, setLocation] = useState(""); return ( <View> <Text>Boiler</Text> <TouchableOpacity> <Text onPress={() => setLocation("Me")}>Click</Text> </TouchableOpacity> </View> ); } export default TestComponent; ahora quiero obtener el enlace de location del componente TestComponent y usarlo en el componente TestScreen , ¿cómo puedo hacer eso?
Debe elevar el estado al componente principal
function TestScreen(props) { const [location, setLocation] = useState(""); return ( <View> <TestComponent setLocation={setLocation} location={location}/> <Text>{location}</Text> </View> ); } function TestComponent({ location, setLocation }) { return ( <View> <Text>Boiler</Text> <TouchableOpacity> <Text onPress={() => setLocation("Me")}>Click</Text> </TouchableOpacity> </View> ); } Y ahora tienes acceso a location en el padre
Ha declarado sus datos y pasado los datos como apoyo al componente secundario, los datos principales pueden ser una matriz, objetos, estados, etc.
import React from "react"; import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native"; import TestComponent from "../components/TestComponent"; function TestScreen(props) { const data = {name: 'im parent data'; otherProperty: 'im other property'} return ( <View> <TestComponent /> PASS DATA AS PROP <Text data={data}>{location}</Text> </View> ); } export default TestScreen;Acceso a los datos principales con notación de puntos:
import React from "react"; import { View, Text, StyleSheet, TouchableOpacity, Image } from "react-native"; function TestComponent(props) { const [location, setLocation] = useState(""); return ( <View> <Text>Boiler</Text> <TouchableOpacity> <Text onPress={() => setLocation("Me")}>Click</Text> <h1>{props.data.name}</h1> <h1>{props.data.otherProperty}</h1> </TouchableOpacity> </View> ); } export default TestComponent;