Question

我正在尝试将参数传递给深两级的组件。我有两个屏幕（MainScreen和UserProfileScreen），两个屏幕上都有一个平面列表，两个平面列表在其renderItem中使用相同的组件EventCard。 EventCard由三个嵌套的三个组件组成：EventCardHeader，EventCardBody和EventCardFooter。如何仅通过UserProfileScreen传递某些论点？我在下面发布了代码，以更好地了解我的财产。

主屏幕

 <FlatList
                data={this.state.events}
                // Get the item data by referencing as a new function to it
                renderItem={({item}) =>
                    <EventCard
                        openEventDetail={() => this.openEventDetail(item)}
                        {...item}
                    />}
            />

UserProfileScreen

   <FlatList
                data={this.state.events}
                // Get the item data by referencing as a new function to it
                renderItem={({item}) =>
                    <EventCard
                        openEventDetail={() => this.openEventDetail(item)}
                        openEditEvent={() => this.openEditEvent(item)}
                        openDeleteEventAlert={() => this.openDeleteEventAlert(item)}
                        {...item}
                    />}
            />



openEditEvent = (event) => {
    this.props.navigation.navigate('EventFormScreen', {
        event: event,
        eventKey: this.state.eventKey,
        editMode: true,
    });
};

事件卡

export default class EventCard extends Component {


render() {

    return (
        <Card>

            <EventCardHeader
                eventOrganiserImage={this.props.eventOrganiserImage}
                eventVenue={this.props.eventVenue}
                openEditEvent={() => this.openEditEvent()}
            />

            <EventCardBody
                openEventDetail={() => this.props.openEventDetail()}
                imageDownloadUrl={this.props.imageDownloadUrl}
            />

            <EventCardFooter
                openEventDetail={() => this.props.openEventDetail()}
                eventName={this.props.eventName}
                eventStartDate={this.props.eventStartDate}
                eventVenue={this.props.eventVenue}
                eventAddressLine1={this.props.eventAddressLine1}
                eventAddressLine2={this.props.eventAddressLine2}
            />

        </Card>
    );
}
};

EvenCardHeader

export default class EventCardHeader extends Component {


render() {

    return (

        <CardSection style={styles.eventCardHeader}>

            <Thumbnail small
                       style={styles.eventOrganiserImage}
                       source={{uri: this.props.eventOrganiserImage}}/>

            <Text style={styles.eventPromoterName}>{this.props.eventVenue}</Text>


            {!!this.props.openEditEvent &&
            <Button onPress={() => this.props.openEditEvent()}>
                Edit
            </Button>
            }

            {!!this.props.openDeleteEventAlert &&
            <Button onPress={() => this.props.openDeleteEventAlert()}>
            Delete
            </Button>
            }

        </CardSection>
    );

}

}

我可以看到，因为我已经将this.openEditEvent()函数硬编码到了导致问题的原因的EventCard组件中，因为然后EventCardHeader中的if语句检查了this.openEditEvent()是否存在总是评估为true。有人可以帮我示范正确的方法吗？预先感谢您的帮助。

更新：

添加到openEditEvent

Answer 1

openEditEvent（）在哪里声明？它应该在父组件中，并作为道具传递给您需要的任何子级。您可以继续将其作为道具从子项传递给子项。

编辑：

好，因此您可以将openEditEvent传递为道具，如下所示：

    e_ = 0
    while e_ < len(new_list):
        new_list[e_] = sorted(new_list[e_], key=str.lower)
        e_ = e_+1

该功能可以在EventCard中使用，然后可以再次作为道具传递给另一个子组件：

'\n'

将参数传递给组件2层深度React Native

1 个答案: