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

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

0 голосов
/ 20 декабря 2018

Я пытаюсь передать параметры компоненту на два уровня глубиной.У меня есть 2 экрана (MainScreen & UserProfileScreen) с плоским списком на обоих экранах, оба плоских списка используют один и тот же компонент EventCard в его renderItem.EventCard состоит из трех трех вложенных компонентов: EventCardHeader, EventCardBody и EventCardFooter.Как передать некоторые аргументы только из UserProfileScreen?Я разместил код ниже, чтобы лучше понять, что у меня есть.

MainScreen 

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

ОБНОВЛЕНИЕ:

Добавлено в openEditEvent

1 Ответ

0 голосов
/ 21 декабря 2018

Где объявляется 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>
  );
}
...