[英]How to pass props in the component to FlatList renderItem
I have a Function as a prop in my component and I have to pass this Function Prop to another Component in the renderItem in FlastList. 我的组件中有一个函数作为道具,并且必须将此函数道具传递给FlastList中renderItem中的另一个组件。 How to do that?
怎么做? Here is my code.
这是我的代码。
import React, { Component } from 'react';
import { View } from 'native-base';
import PropTypes from 'prop-types';
import { FlatList } from 'react-native';
import AddPlayers from '../AddPlayers/AddPlayers';
import League from '../League/League';
export default class InviteLeagues extends Component {
static propTypes = {
invitedLeagues: PropTypes.Array,
label: PropTypes.string.isRequired,
InvitedLeaguesList: PropTypes.Array,
onPress: PropTypes.func.isRequired
};
static defaultProps = {
InvitedLeaguesList: [
{ name: 'Howdy', createdBy: 'email1@gamil.com', status: 'Join' },
{ name: 'Lorem', createdBy: 'email@gmail.com', status: 'Join' }
]
};
renderLeague(item) {
return <League invitedLeague={item} />;
}
render() {
return (
<View {...this.props}>
<AddPlayers
label={this.props.label}
labelStyle={{ fontStyle: 'italic' }}
/>
<FlatList
numColumns={1}
data={this.props.InvitedLeaguesList}
renderItem={this.renderLeague}
/>
</View>
);
}
}
Now I have to pass onPress
(Function Prop) to League
Component 现在我必须将
onPress
(功能道具)传递给League
组件
I tried like this 我尝试过这样
<FlatList
numColumns={1}
data={this.props.InvitedLeaguesList}
renderItem={this.renderLeague}
extraData={this.props}
/>
renderLeague(item) {
return <League invitedLeague={item} onPress={this.props.onPress} />;
}
I think you try to make a callBack
function, if so, please do the following. 我认为您尝试制作
callBack
函数,如果是这样,请执行以下操作。
renderLeague(item) {
return <League invitedLeague={item} onPress={this._callBack.bind(this)} />;
}
//callback function
_callBack(data) {
// your code here...
}
From your component League
来自您的
League
call the function like the following, 像下面这样调用函数,
this.props.onPress(datas);
you can pass props as a parameter to the function that render items of flat list as below: 您可以将props作为参数传递给呈现平面列表项目的函数,如下所示:
<FlatList
numColumns={1}
data={this.props.InvitedLeaguesList}
renderItem={(item) => this.renderLeague(item, this.props)}
/>
and you can use this parameter in the renderLeague
function: 您可以在
renderLeague
函数中使用此参数:
renderLeague({item}, props) {
...
}
that props variable include all parameter of props as you can use this.props
in another place. 该props变量包含props的所有参数,因为您可以在其他地方使用
this.props
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.