Pour me donner un lien de docs que j'ai déjà lu, merci je sais faire. Je suis juste en train de suivre le cours sur ce site qui est sur une ancienne version, je suis sur la dernière et donc j'aimerais comprendre en me montrant par du concret (et pas par un lien) l'erreur dans le code afin de savoir quels sont les changements.
De plus il s'agit de doc sur React et je suis sur React Native.
Bonjour un component purement fonctionel en reactjs où react native reçoit ses props dans le parmètre du constructeur:
export default function TrackItem({
track
}) {
// const track = this.props.track;
// console.log(props.track);
console.log( track ) ;
return (
<View style={styles.main_container}>
<Image
style={styles.image}
source={{uri: "image"}}
/>
<View style={styles.content_container}>
<View style={styles.header_container}>
<Text style={styles.title_text}>{track.title}</Text>
<Text style={styles.vote_text}>{track.vote_average}</Text>
</View>
<View style={styles.description_container}>
<Text style={styles.description_text} numberOfLines={6}>{track.overview}</Text>
{/* La propriété numberOfLines permet de couper un texte si celui-ci est trop long, il suffit de définir un nombre maximum de ligne */}
</View>
<View style={styles.date_container}>
<Text style={styles.date_text}>Sorti le {track.realease_date}</Text>
</View>
</View>
</View>
);
}
où sur cette syntaxe si tu préféres:
export default function TrackItem( props ) {
// const track = this.props.track;
// console.log(props.track);
console.log( props.track ) ;
return (
<View style={styles.main_container}>
<Image
style={styles.image}
source={{uri: "image"}}
/>
<View style={styles.content_container}>
<View style={styles.header_container}>
<Text style={styles.title_text}>{track.title}</Text>
<Text style={styles.vote_text}>{track.vote_average}</Text>
</View>
<View style={styles.description_container}>
<Text style={styles.description_text} numberOfLines={6}>{track.overview}</Text>
{/* La propriété numberOfLines permet de couper un texte si celui-ci est trop long, il suffit de définir un nombre maximum de ligne */}
</View>
<View style={styles.date_container}>
<Text style={styles.date_text}>Sorti le {track.realease_date}</Text>
</View>
</View>
</View>
);
}
la donnée this.props fait référence au props dans un component écrit avec la syntaxe des class:
import React from 'react';
export default class TrackItem extends React.Component {
render() {
console.log( this.props ) ;
return (
<View style={styles.main_container}>
<Image
style={styles.image}
source={{uri: "image"}}
/>
<View style={styles.content_container}>
<View style={styles.header_container}>
<Text style={styles.title_text}>{track.title}</Text>
<Text style={styles.vote_text}>{track.vote_average}</Text>
</View>
<View style={styles.description_container}>
<Text style={styles.description_text} numberOfLines={6}>{track.overview}</Text>
{/* La propriété numberOfLines permet de couper un texte si celui-ci est trop long, il suffit de définir un nombre maximum de ligne */}
</View>
<View style={styles.date_container}>
<Text style={styles.date_text}>Sorti le {track.realease_date}</Text>
</View>
</View>
</View>
) ;
}
}
Tu peut revoir le code d'exemple de la doc de reactnative sur les props ici
import React from 'react';
import { Text, View } from 'react-native';
function Cat(props) {
return (
<View>
<Text>Hello, I am {props.name}!</Text>
</View>
);
}
- Edité par SamuelGaborieau3 8 avril 2020 à 0:11:44
suggestion de présentation.
Cannot read property 'props' of undefined
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
suggestion de présentation.