React Native：从功能组件中导出功能答案

【问题标题】：React Native: Exporting a function from a functional componentReact Native：从功能组件中导出功能
【发布时间】：2020-05-30 06:40:02
【问题描述】：

问题：

我试图弄清楚如何从功能组件“ContractHandler”中导出一个名为“addPostCode”的函数。
我想在另一个名为“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 中获得值的变量。

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

【问题讨论】：

您可以在这样导航时传递您的数据：navigation.navigate('screenX',{data}) 然后在componentWillMount 中触发您的函数，当有data 时，您可以在@ 之前使用export 关键字导出组件987654328@，然后你可以像这样在任何地方导入它：import {myFunction} from 'location'。如果你使用 react 钩子，componentWillMount 等于：useEffect(()=>{//your statemnets},[]);。

标签： javascript react-native react-hooks react-functional-component

【解决方案1】：

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

【讨论】：

【解决方案2】：

组件自己的状态不能从外部设置（技术上你可以解决它，但这不是正确的方法）。如果您想在组件之间共享状态，请使用全局状态管理器 (redux) 或 Context，或者如果组件是同级组件，则只需使用它们的共同父级来存储状态。

【讨论】：