如何将组件中的道具传递给 FlatList renderItem

Posted 2023-02-16

【中文标题】如何将组件中的道具传递给 FlatList renderItem

【英文标题】：How to pass props in the component to FlatList renderItem

【发布时间】：2019-09-13 08:35:53

【问题描述】：

我的组件中有一个函数作为道具，我必须将此函数道具传递给 FlastList 中 renderItem 中的另一个组件。怎么做？这是我的代码。

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: '[e-mail]', status: 'Join' ,
       name: 'Lorem', createdBy: '[e-mail]', 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>
    );
  

现在我必须将 onPress (Function Prop) 传递给 League 组件

我试过这样

 <FlatList
          numColumns=1
          data=this.props.InvitedLeaguesList
          renderItem=this.renderLeague
          extraData=this.props
        />

renderLeague(item) 
    return <League invitedLeague=item onPress=this.props.onPress />;
  

【问题讨论】：

将renderLeague() 更改为renderLeague = () => ，它应该可以工作。

您正确地传递了函数 prop 您只需要从 League 组件调用 this.props.onPress() 并将 renderLeague() 的函数定义更改为 renderLeague = () => 它将按预期工作。

【参考方案1】：

您可以将 props 作为参数传递给渲染平面列表项的函数，如下所示：

<FlatList
     numColumns=1
     data=this.props.InvitedLeaguesList
     renderItem=(item) => this.renderLeague(item, this.props)
/>

你可以在renderLeague函数中使用这个参数：

renderLeague(item, props) 
   ...

props 变量包含所有 props 参数，因为您可以在其他地方使用 this.props。

【参考方案2】：

这种方式适合我

<FlatList
     numColumns=1
     data=this.props.InvitedLeaguesList
     renderItem=( item ) => <League invitedLeague=item onPress=this.props.onPress />
     extraData=this.props
 />

【讨论】：

能够在组件中获取onPress道具

【参考方案3】：

我认为您尝试创建 callBack 函数， 如果是这样，请执行以下操作。

renderLeague(item) 
    return <League invitedLeague=item onPress=this._callBack.bind(this) />;



//callback function
_callBack(data) 
   // your code here...

来自您的组件League

像下面这样调用函数，

this.props.onPress(datas);

【讨论】：

您应该始终在构造函数中使用bind。