子组件中的渲染按钮仅在特定屏幕上

时间:2018-11-06 16:35:47

标签: javascript reactjs react-native react-native-flatlist react-component

我在2个不同的屏幕上使用平面列表。 在EventListScreen上: 这是主屏幕,应显示所有事件。 并且在第二页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 :(得分:1)

如果我正确理解了您的问题,解决此问题的一种方法是传递一个布尔值“ showable prop”以仅在需要时显示编辑按钮:

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来处理新的prop,如果未指定,则不会显示编辑按钮)

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
};

通过这种方式,您只显示定义了prop shouldShowEditButton的组件的编辑按钮,并且由于其默认值定义为false,因此没有显示prop的组件。属性的行为将与以前相同。

答案 1 :(得分:1)

您不需要其他属性。

我们可以假设定义了openEditEvent属性时,“编辑”按钮应该可用。

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定义为一个函数,是可选的(不是必需的)。