Как вызвать функцию внутри класса рендеринга в React-native

#reactjs #react-native #react-navigation

#reactjs #react-native #реагировать-навигация

Вопрос:

Я хочу вызвать функцию внутри импортированного класса рендеринга. Я попробовал следующее, но безуспешно.

class1.js

 import class2 from "./class2";
export default class1 MainCategoriesScreen extends React.PureComponent  {
    renderItem({ item }) {
       return <Class2 product={item}/>
    }

    changeCategoryId(id){
        console.log(id);
    }

    render() {
     return (
      <FlatList
      data={this.state.products}
      renderItem={this.renderItem}
      ...

}

и для class2

   render() {
   return (
      <Card style={{flex:1}}>
          <CardItem cardBody button
            onPress={this.changeCategoryId(product.id)}>
            ...
          </CardItem>
            ...
}
export default withNavigation(class2 );

Также я пробовал эти:

 this.changeCategoryId(product.id)
this.changeCategoryId(product.id)
this.changeCategoryId.bind(product.id)
this.props.changeCategoryId(product.id)

Ответ №1:

Вы можете передать changeCategoryId метод из класса 1 в класс 2 в качестве prop, а затем вызвать его следующим образом this.props.changeCategoryId() :

 // class 1
constructor(props) {
    super(props);

    ...

    this.renderItem = this.renderItem.bind(this);
    this.changeCategoryId = this.changeCategoryId.bind(this);
}

renderItem({ item }) {
   return <Class2 product={item}
                  changeCategoryId={this.changeCategoryId}/>
}

// class 2
  render() {
    return (
      <Card style={{flex:1}}>
        <CardItem cardBody button
          onPress={this.props.changeCategoryId(product.id)}>
          ...
        </CardItem>
      ...

Обратите внимание, что вам нужно связать оба changeCategoryId и renderItem в классе 1.

1. ДА. он находится в class1. Но я тестирую ваш код. потому changeCategoryId={this.changeCategoryId.bind(this)} что я получаю эту ошибку: не удается прочитать свойство ‘bind’ underfind

2. Метод renderItem также должен быть привязан, например this.renderItem = this.renderItem.bind(this) (я обновил ответ этим). Другим вариантом является определение методов с синтаксисом функции arrow, как показано в ответе Kape, который не требует привязки какого-либо метода (обратите внимание, что определение метода там немного отличается от вашего кода). Использование bind или другого способа определения методов должно работать нормально

3. Спасибо. Я тоже должен привязать renderItem .

Ответ №2:

Недавно у меня была такая же проблема, просто сделайте это:

 export default class1 MainCategoriesScreen extends React.PureComponent  {
  renderItem = ({ item }) => {
    return <Class2 product={item} onPress={this.myfunction} />
  }

  myfunction = (id) => {
      console.log(id);
  }

  render() {
    return (
     <FlatList
       data={this.state.products}
       renderItem={this.renderItem}
       ...

 render() {
  return (
    <Card style={{flex:1}}>
      <CardItem cardBody button
        onPress={() => this.props.onPress(product.id)}>
        ...
      </CardItem>
        ...

Ответ №3:

Вы также можете попробовать это:

 renderItem = ({ item }) => {
   return <Class2 product={item} onPress={id => this.myfunction(id)} />
}

myfunction(id) {
  console.log(id);
}

Ответ №4:

 renderItem({ item }) {
  return <Class2 product={item}/>
}

Похоже, вам не хватает передачи prop в Class2, который будет обрабатывать changeCategoryId .

 renderItem({ item }) {
  return <Class2 changeCategoryId={this.changeCategoryId} product={item}/>
}

Это означает, что Class2 теперь будет иметь доступ к prop, changeCategoryId который будет вызываться changeCategoryId функцией Class1.

Затем в функции рендеринга в вашем Class2 вы можете сделать:

 <CardItem cardBody button
  onPress={() => this.props.changeCategoryId(product.id)}>
  ...