如何在React-native中调用Render类中的函数

Question

我想在导入的渲染类中调用一个函数。我尝试了以下但没有成功。

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)

Answer 1

你可以将changeCategoryId方法从1级传递给2级作为道具，然后像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>
      ...

请注意，您需要在第1类中绑定changeCategoryId和renderItem。

Answer 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>
        ...

Answer 3

你也可以试试这个：

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

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

Answer 4

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

您似乎缺少将prop传递给Class2，它将处理changeCategoryId。

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

这意味着，Class2现在可以访问名为changeCategoryId的道具，它将是Class1的changeCategoryId函数。

然后在Class2中的render函数中，您可以执行以下操作：

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