Question

在将数据结构传递给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>
})

Answer 1

为DisplayPerson创建父组件。将信息从父级传递给子级，并使用子组件中的props。

类似的东西：

并在DisplayPerson组件中使用info。

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

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

1 个答案: