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

Question

我在两个不同的屏幕上使用平面列表。 在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()}
            >
         }

Answer 1

您不需要其他属性。

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

事件中的条件(使用转换为 bool， false 表示未定义):

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

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

        </CardSection>

使用 propTypes 将 openEditEvent prop 定义为函数，可选(非必需)。