Utiliser les Props avec React Native

Vous souhaitez transmettre efficacement des données entre composants dans React Native.

Sans une méthode structurée, vos composants risquent de devenir confus et difficiles à maintenir.

L’article explore comment utiliser les props pour une communication fluide entre composants parent et enfant, assurant un affichage dynamique.

Table de matière

Utilisation des Props en React Native Transmission de Données avec Props FAQ Conclusion

Formation Créer une Application Simple avec React Native

Développez votre première application mobile en un rien de temps !

Jusqu’à présent, nous avons modifié notre application et commencé à utiliser l’état, mais nous n’avons pas encore affiché la liste des tâches stockée dans notre variable d’état.

Pour les afficher, nous allons les passer en tant que props . Dans React Native, props sont utilisés pour transmettre des données d’un composant parent à un composant enfant, permettant de personnaliser l’affichage et le comportement de l’enfant.

Utilisation des Props en React Native

Voyons les modifications au niveau de notre programme pour implémenter props.

Dans le fichier index.js :

				
					
 import React, { useState } from "react";
import { Text, View, StyleSheet } from "react-native";
import ToDoList from "@/components/toDoList";
export default function Index() {
// State for todos
const [todos, setTodos] = useState([
{ text: "Apprendre le React Native", key: '1' },
{ text: "Construire ma première application ToDoList", key: '2' }
]);

// Display
return (
<View style={styles.main}>
<Text>Edit app/index.tsx to edit this screen now .</Text>
<ToDoList todos={todos}/>
</View>
);
}
const styles = StyleSheet.create({
main: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
});

Avec cet extrait de code :

				
					
 return (
<View style={styles.main}>
<Text>Edit app/index.tsx to edit this screen now .</Text>
<ToDoList todos={todos}/>
</View>
);
}

Nous avons ajouté le composant ToDoList avec le props todos qui nous permet d’afficher les valeurs de notre tâche.

Ensuite, examinons également les modifications apportées aux composants toDoList.js et toDoItem .js, qui sont des composants enfants et recevront les props :

toDoList.js :

				
					
 import React from "react";
import { View, StyleSheet } from "react-native";
import ToDoItem from "@/components/toDoItem";
const ToDoList = ({ todos }) => {
return (
<View style={styles.list}>
{todos.map((todo) => (
<ToDoItem item={todo} key={todo.key}  />
))}
</View>
);$
};
const styles = StyleSheet.create({
list: {
marginTop: 20,
},
});
export default ToDoList;

toDos est passé en tant que props dans le composant toDoList , puis il sera transmis au composant toDoItem afin de pouvoir être affiché dans notre application. Voyons maintenant comment effectuer ce transfert.

toDoItem .js.

				
					
 import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
const ToDoItem = ({ item }) => {
return (
<TouchableOpacity style={styles.item} >
<Text>{item.text}</Text>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
item: {
padding: 10,
marginVertical: 8,
marginHorizontal: 16,
borderBottomWidth: 1,
borderBottomColor: '#ccc',
},
});
export default ToDoItem;

Transmission de Données avec Props

Après avoir correctement implémenté le transfert des props du composant parent vers le composant enfant, nous devrions obtenir un résultat similaire à ceci si tout fonctionne comme prévu. Cela permettra aux composants enfants d’afficher les données transmises par le parent de manière dynamique et interactive.

Parafait, tout fonctionne bien maintenant et nous avons terminé avec succès l’implémentation de props .

Formez-vous gratuitement avec Alphorm !

Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.

FAQ

Comment transmettre des données entre composants dans React Native ?

Dans React Native, les données sont transmises entre composants à l’aide des props. Un composant parent peut envoyer des données à un composant enfant en définissant des props dans l’élément enfant. Par exemple, dans une application de liste de tâches, le composant parent ToDoList peut transmettre un tableau de tâches au composant enfant ToDoItem. Cela permet d’afficher chaque tâche individuellement tout en assurant une séparation claire des responsabilités entre les composants.

Qu'est-ce que les props en React Native ?

Les props en React Native sont des propriétés utilisées pour transmettre des données d’un composant parent à un composant enfant. Elles permettent d’adapter l’affichage et le comportement de l’enfant selon les données reçues. Les props sont immuables, ce qui signifie que le composant enfant ne peut pas les modifier. Cela assure une communication unidirectionnelle et prévisible entre les composants, essentielle pour maintenir une structure d’application claire.

Pourquoi utiliser les props dans une application React Native ?

L’utilisation des props dans une application React Native permet une communication efficace entre les composants parent et enfant. Les props facilitent la personnalisation de l’affichage et du comportement des composants enfants sans dupliquer le code ou créer des dépendances inutiles. Cela est particulièrement utile dans des applications dynamiques comme une ToDoList, où chaque élément doit être affiché en fonction des données spécifiques transmises par le composant parent.

Comment les props améliorent-elles l'affichage dynamique dans React Native ?

Les props améliorent l’affichage dynamique dans React Native en permettant de transmettre des données spécifiques depuis un composant parent vers un composant enfant. Cela signifie que l’affichage peut être modifié en temps réel, en fonction des données reçues, sans nécessiter de rechargement de l’application. Dans une liste de tâches, par exemple, chaque tâche est affichée dynamiquement selon les données passées par le composant parent, ce qui rend l’application plus interactive et réactive.

Comment implémenter les props dans une liste de tâches React Native ?

Pour implémenter les props dans une liste de tâches React Native, commencez par définir un état dans le composant parent pour stocker les tâches. Ensuite, passez cet état comme prop au composant enfant, par exemple ToDoList. Le composant enfant recevra les tâches et les affichera en les transmettant à d’autres composants enfants, comme ToDoItem, permettant ainsi d’afficher chaque tâche individuellement. Cette approche rend le code plus modulaire et facile à maintenir.

Conclusion

En utilisant les props, vous pouvez structurer efficacement vos applications React Native pour des interactions dynamiques et modulaires. Comment allez-vous intégrer cette approche dans vos projets futurs ?