时间戳

首页 > 解决方案 > 在 React Native 中将参数从功能组件传递到类组件

react-native - 在 React Native 中将参数从功能组件传递到类组件

问题描述

我有功能组件，我在其中传递参数onPress。下面是代码：

第 1 页

const onPress = (data) => {
    navigation.goBack();
    route.params.onPress(data);
  };

我能够将它传递给一个功能组件，在那里我获取数据，并且能够更新我在功能组件中的状态。以下是功能组件的代码片段：

第2页

function gotoSearch() {
    navigation.navigate('SearchScreen',{
      onPress:(data)=>{
        console.log("Location Selected",data);
        updateStateVar({
          ...stateVar,
          address_line_1: data.address_line1,
          address_line_2: data.address_line2,
          area: data.area,
          city: data.city,
          country: data.country,
          pincode: data.postCode,
          lat:data.lat,
          lng:data.lng,
        });
      }
    });
  }

我有另一个组件，它是一个类组件，我尝试做同样的事情，但向我显示了错误。下面是类组件的代码片段：

第3页

gotoSearch = () => {
    this.props.navigation.navigate('SearchScreen'), {
      onPress: (data) => {
        console.log("Location Selected",data);
      }
    }

}

错误：

cannot read property of 'onPress' of undefined

const onPress = (data) => {
    navigation.goBack();
    route.params.onPress(data);
                 ^
  };

标签： react-nativereact-native-androidreact-native-ios

解决方案

您将需要导出 onPress 功能

export const onPress = (data) => {
    navigation.goBack();
    route.params.onPress(data);
  };

然后在你的类组件中使用它

gotoSearch = () => {
    this.props.navigation.navigate('SearchScreen'), {
      onPress: (data) => {
        console.log("Location Selected",data);
      }
    }

如果您的函数存在于不同的文件中，然后首先导入它然后使用

import {onPress} from './file.js'

推荐阅读