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

您似乎缺少将道具传递到将处理changeCategoryId的 Class2 中的功能。

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

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

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

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

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

4 个答案: