Как передать реквизиты в компоненте в FlatList renderItem

#react-native #react-native-flatlist

Вопрос:

У меня есть функция в качестве prop в моем компоненте, и я должен передать эту функцию Prop другому компоненту в элементе визуализации в FlastList. Как это сделать? Вот мой код.

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

Теперь я должен передать 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} />;
  }

1. Измените renderLeague() {} на renderLeague = () => {} , и это должно сработать.

2. Вы передаете prop функции правильно, вам просто нужно вызвать this.props.onPress() из компонента League и изменить определение функции renderLeague() {} на renderLeague = () => {}, и это будет работать, как ожидалось.

Ответ №1:

вы можете передать реквизиты в качестве параметра функции, которая отображает элементы из плоского списка, как показано ниже:

 <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}
 />

1. Возможность получения реквизита onPress в компоненте <League />

2. И использовать его таким образом с параметрами типа Props: type LeagueProps = { item:any; onPress:any; }; function League({ item, navigation }: LeagueProps){...}

Ответ №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);