仅在特定屏幕上在子组件中呈现按钮

Question

我在 2 个不同的屏幕上使用平面列表。在 EventListScreen 上：这是主屏幕，应该显示所有事件。在第二页 UserProfile.js 此页面应仅显示该用户事件。在两个平面列表中，我使用存储在单独 class 中的纯组件到平面列表所在的位置，即

我的问题是，只有当用户在 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()}
            >
         }

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

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

Answer 2

您不需要额外的属性。

我们可以假设 "Edit" 按钮在定义 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 定义为函数，可选（非必需）。

仅在特定屏幕上在子组件中呈现按钮

Render button in child component only on certain screen

javascript

reactjs

react-native

react-native-flatlist

react-component