Passer des données à un composant dans React Native ?

Question

J'ai des problèmes avec la syntaxe sur les props lors du passage d'une structure de données à un composant dans React Native. Si quelqu'un pouvait m'aider à voir comment je peux réutiliser le composant 'DisplayPerson' ci-dessous en lui passant 'FemaleInfo' puis à nouveau 'MaleInfo', je l'apprécierais grandement.

var FemaleInfo = [
    {name: 'Jane Doe', age: 23, occupation: 'Carpenter'},
    {name: 'Kate Ryan', age: 31, occupation: 'Lawyer'},
    {name: 'Ellen Anderson', age: 42, occupation: 'Doctor'}
];

var MaleInfo = [
    {name: 'John Doe', age: 23, occupation: 'Carpenter'},
    {name: 'Jack Douglas', age: 31, occupation: 'Lawyer'},
    {name: 'Rick Smith', age: 42, occupation: 'Doctor'}
];

var DisplayPerson = React.createClass({
    getInitialState: function() {
        return {
            name: FemaleInfo[0].name,
            age: FemaleInfo[0].age,
            occupation: FemaleInfo[0].occupation
        };
    },
    render() {
        return (
            <Text style={styles.data}>
                {this.state.name}
            </Text>
            <Text style={styles.data}>
                {this.state.age}
            </Text>
            <Text style={styles.data}>
                {this.state.occupation}
            </Text>
})

Answer 1

Créez un composant parent pour DisplayPerson. Transmettez les informations du parent à l'enfant et utilisez les accessoires dans le composant enfant.

Quelque chose comme :

et utiliser les informations dans le composant DisplayPerson.

render() {
    let info = this.props.info;
    return (
        <View>
            <Text style={styles.data}>
                {info.name}
            </Text>
            <Text style={styles.data}>
                {info.age}
            </Text>
            <Text style={styles.data}>
                {info.occupation}
            </Text>
        </View>)
}