从功能组件 React Native 调用函数答案

【问题标题】：Call a function from a functional component React Native从功能组件 React Native 调用函数
【发布时间】：2021-07-15 07:36:06
【问题描述】：

我遇到了下一个问题，尝试从功能组件调用函数，例如类组件中的shared。我的测试代码是：

import React, { useState } from 'react'

export const TestShared = () => {
    const [number, setNumber] = useState(0)

    const increase = () => {
        return setNumber(prevValue => prevValue + 1)
    }

    const getNumber = () => {
        return number
    }
}

在另一个文件中，我导入TestShared 并尝试调用TestShared.increase() 或TestShared.getNumber() 等函数，但当然是未定义的。

如果不使用useContext，我怎样才能做到这一点？如果有任何可能的方法。

谢谢！

【问题讨论】：

标签： react-native function react-functional-component

【解决方案1】：

You can check code here

const TestShared = () => {
 const [number, setNumber] = useState(0)

    const increase = () => {
        return setNumber(prevValue => prevValue + 1)
    }

    const getNumber = () => {
        return number
    }

    return {
        increase,
        getNumber
    };
}

export default TestShared ;

你想要这个函数的地方就这样导入

import React, {useEffect} from "react";

import TestShared from './Helpers/TestShared' 

function MyComponent = () => {
    const {increase, getNumber} = TestShared();
}

【讨论】：

我得到getNumber 不是从TestShared 导出的。
第一眼看起来不错，但经过测试它会引发错误：TypeError: (0, _$$_REQUIRE(_dependencyMap[7], "./Helpers/TestShared").increase) is not a function. (In '(0, _$$_REQUIRE(_dependencyMap[7], "./Helpers/TestShared").increase)()', '(0, _$$_REQUIRE(_dependencyMap[7], "./Helpers/TestShared").increase)' is undefined)
能否请您在导入此代码的地方分享代码
@arslan --- 这就是我导入它们的方式：import { increase, getNumber } from './Helpers/TestShared' 这就是我对它们的称呼：` increase() }>` 和 @987654328 @
但是我导入它们的方式和你一样，只是路径不同，因为 TestShared 文件与调用它的文件位于不同的文件夹中

【解决方案2】：

经过一些实验，我只是想进一步扩展@arsian 的答案。

在父组件中导入对象时使用的名称必须与子组件中导出元素的名称完全相同，否则，返回将是未定义的：

子组件：

return {
        increase,
        getNumber
    };
export default TestShared ;

父组件：

const {wrongName, getWrong} = TestShared(); //This will NOT work
console.log(wrongName); //undefined

const {increse, getNumber} = TestShared(); //This WILL work

返回的元素可以是state和setState函数，实际上，它们可以是任何类型（函数、数组、对象、列表...）。此外，导出或导入时元素的顺序无关紧要（名称确实如此）。例如，

子组件：

const arr = [0];
const obj = { a: 1 };
function fn() {
        console.log(arr, obj);
  };

return {
        number,
        setNumber,
        arr,
        obj,
        fn

    };

父组件：

const {number, setNumber,obj,arr,fn} = TestShared();
console.log(arr,obj);
fn();

// [0],{a:1}

虽然最后一点可能非常直观，但第一点给我带来了一些麻烦，因为我认为元素的顺序是重要因素而不是名称。因此，我想在React 中分享我对组件之间共享状态的实验。

干杯。

【讨论】：

非常有趣的观察，我也认为这与顺序有关，而不是名称。感谢您提供此信息