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