将数据传递到React Native中的组件？

Jessie Richardson 发表于 Dev

杰西·理查森（Jessie Richardson）

在将数据结构传递到React Native中的组件时，我在props的语法上遇到麻烦。如果有人可以帮助我看看如何通过传递“ FemaleInfo”组件来重用下面的“ DisplayPerson”组件，然后再次使用“ MaleInfo”组件，将不胜感激。

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>
})

贾加迪什·阿帕德（Jagadish Upadhyay）

为DisplayPerson创建一个父组件。将信息从父级传递给子级，并在子级组件中使用道具。

就像是：

并在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>)
}