Передача параметра в глубину компонента 2 React Native

Question

Я пытаюсь передать параметры компоненту на два уровня. У меня есть 2 экрана (MainScreen & UserProfileScreen) с плоским списком на обоих экранах, оба плоских списка используют один и тот же компонент EventCard в его renderItem. 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,
    });
};

EventCard

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, что вызывает у меня проблему, потому что тогда if оператор в EventCardHeader, который проверяет, является ли this.openEditEvent() существует всегда оценивается как истина. Может ли кто-нибудь помочь мне показать правильный способ сделать это? Заранее благодарю за любую помощь.

ОБНОВИТЬ:

Добавлено в 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>
  );
}