时间戳

首页 > 解决方案 > React Native：从功能组件中导出功能

javascript - React Native：从功能组件中导出功能

问题描述

问题：

  1. 我试图弄清楚如何从功能组件“ContractHandler”中导出一个名为“addPostCode”的函数。

  2. 我想在另一个名为“RentalDetailScreen”的功能组件中使用“addPostCode”，这样当我导航到下一页时，它将触发“addPostCode”并将“postCode”的状态存储在“ContractHandler”中。

这是“ContractHandler.js”：

import React, { useState } from 'react';

const ContractHandler = () => {

  const [postCode, setPostCode] = useState();

  const addPostCode = (data) => {
    setPostCode(data)
    console.log(postCode)
  };

  return(
    <View>
      <Text></Text>
    </View>
  )

}

export default ContractHandler;

这些是 RentalDetailScreen.js 的一部分，我在其中导航到下一页并希望触发“addPostCode”函数并将“postCode”值发送到“ContractHandler.js”。

这是导入：

import { addPostCode } from '../../database/ContractHandler';

这是带有“addPostCode”功能的导航。

<TouchableOpacity onPress={() => { navigation.navigate('SecurityDetail'); addPostCode(postCode); }}>
  <View style={slider.buttonStyle}>
    <Text style={slider.textStyle}>Neste</Text>
    <Ionicons name='ios-arrow-forward'style={slider.iconStyle} />
  </View>
</TouchableOpacity>

“postCode”只是一个从 TextInput 获得值的变量。

如果我不够清楚，请告诉我，我会尽力解释得更好:)

标签： javascriptreact-nativereact-hooksreact-functional-component

解决方案

有两种方法可以解决这个问题。您可以使用像 redux 这样的状态管理器，或者您必须将函数作为 props 从组件传递到组件。我个人会使用 redux，因为它使组件之间的状态共享变得更加简单。

推荐阅读