Кнопка рендеринга в дочернем компоненте только на определенном экране - PullRequest
Новая
       26

Кнопка рендеринга в дочернем компоненте только на определенном экране

0 голосов
/ 06 ноября 2018

Я использую плоский список на 2 разных экранах. На EventListScreen: это главный экран и должен отображать все события. а на 2-й странице UserProfile.js эта страница должна отображать только события пользователя. в обоих плоских списках я использую чистый компонент, хранящийся в отдельном классе, где плоские списки, т.е.

Мой вопрос заключается в том, что я хочу отобразить кнопку «Редактировать» на дочернем компоненте Event.js, только если пользователь находится на UserProfileScreen.js

Я посмотрел много примеров, но не могу найти ни одного, показывающего, как это сделать. с чистым детским компонентом, как я делаю.

Любая помощь будет принята с благодарностью! Спасибо

EventListScreen.js 

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

UserProfileScreen.js 

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

                        {...item}
                    />}
            />

Event.js 

export default class Event extends Component {

render() {

    return (
        <Card>
            <CardSection>
                <Text>{this.props.eventName}</Text>

                 //I want this button to be displayed only if user is viewing
                 //from the UserProfile.js
                <Button onPress={() =>this.props.openEditEvent()}>
                    {this.props.displayButton}
                </Button>

            </CardSection>

            <TouchableOpacity
              onPress={() => this.props.openEventDetail()}
            >
         }

Ответы [ 2 ]

0 голосов
/ 07 ноября 2018

Вам не нужны дополнительные свойства.

Мы можем предположить, что кнопка «Изменить» должна быть доступна, когда определено openEditEvent prop.

Условие в event (с использованием преобразования в bool, false для неопределенного): 

        <CardSection>
            <Text>{this.props.eventName}</Text>

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

        </CardSection>

Используйте propTypes, чтобы определить openEditEvent prop как функцию, необязательно (не обязательно).

0 голосов
/ 06 ноября 2018

Если я правильно понимаю вашу проблему, вариант решения этой проблемы будет состоять в том, чтобы передать логическую «отображаемую реквизит», чтобы кнопка редактирования отображалась только при необходимости:

EventListScreen.js (остается прежним, здесь кнопка редактирования не отображается) 

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

UserProfileScreen.js (мы добавляем пропущение shouldShowEditButton к событию, чтобы показать кнопку) 

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

Event.js (Мы добавим несколько propTypes и defaultProps для обработки новой проп, не будет отображаться кнопка редактирования, если она не указана) 

export default class Event extends Component {

    render() {

        return (
            <Card>
                <CardSection>
                    <Text>{this.props.eventName}</Text>

                     //I want this button to be displayed only if user is viewing
                     //from the UserProfile.js
                    {this.props.shouldShowEditButton && <Button onPress={() =>this.props.openEditEvent()}>
                        {this.props.displayButton}
                    </Button>}

                </CardSection>

                <TouchableOpacity
                  onPress={() => this.props.openEventDetail()}
                >
                ...
        ...
        );
    ...
    }
}

// We add some default propTypes and definitions
Event.propTypes = {
    shouldShowEditButton: PropTypes.bool
};

Event.defaultProps = {
    shouldShowEditButton: false
};

Таким образом, вы показываете кнопку редактирования только для компонентов, для которых задана опора shouldShowEditButton, а поскольку значение по умолчанию определено как false, компоненты, не имеющие этого свойства, будут работать в так же, как они были раньше.

...