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

Question

我试图将参数传递给两层深的组件。 我有 2 个屏幕（MainScreen 和 UserProfileScreen），两个屏幕上都有一个平面列表，两个平面列表在其 renderItem 中使用相同的组件 EventCard。 EventCard 由 3 个三个嵌套的组件 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}
                    />}
            />

用户配置文件屏幕

   <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 中检查 this.openEditEvent() 是否存在的 if 语句始终评估为真。有人能帮我看看正确的方法吗？提前感谢您的帮助。

更新：

添加于openEditEvent

Answer 1

openEditEvent() 在哪里声明？它应该在父组件中，并作为道具传递给你需要它的任何孩子。你可以继续将它作为道具从孩子传递给孩子。

编辑：

好的，你可以像这样将 openEditEvent 作为道具传递：

                <EventCard
                    openEditEvent = this.openEditEvent
                    openEventDetail={() => this.openEventDetail(item)}
                    openDeleteEventAlert={() => this.openDeleteEventAlert(item)}
                    {...item}
                />}

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

render() {

  var openEditEvent = this.props.openEditEvent;

  return (
    <Card>

        <EventCardHeader
            eventOrganiserImage={this.props.eventOrganiserImage}
            eventVenue={this.props.eventVenue}
            openEditEvent = 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>
  );
}