React native 从功能组件调用函数

下一个问题是，尝试从函数组件调用函数，如

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

，如何实现这一点？如果有可能的话

谢谢大家!

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

import React, {useEffect} from "react";

import TestShared from './Helpers/TestShared' 

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

---

在做了一些实验之后，我只是想对@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

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}

父组件：

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

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}

返回元素可以是

状态

和

设置状态

函数，实际上，它们可以是任何类型（函数、数组、对象、列表…）。此外，导出或导入时元素的顺序并不重要（名称不重要）。比如说,

子组件：

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

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}

父组件：

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

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

中分享我关于在组件之间共享状态的实验

---

干杯。

I get

getNumber

不是从

TestShared

导出的。乍一看效果不错，但测试后会抛出一个错误：

TypeError:（0，$$\u REQUIRE（\u dependencyMap[7]，“/Helpers/TestShared”）。increase）不是函数。（在“（0，“/Helpers/TestShared”（“/dependencMap[7]”，“/Helpers/TestShared”）.increase）（“，”（0，“/Helpers/TestShared”（“/dependencMap[7]”，“/Helpers/TestShared”）.increase）中未定义）

您可以在导入此文件的地方共享代码吗code@arslan---我就是这样导入它们的：

import{increase，getNumber}从“./Helpers/TestShared”

我就是这样称呼它们的：`increase（）}>`和

getNumber（）}>

但是我导入它们的方式和你一样，只是路径不同，因为

TestShared

文件与调用它的文件位于不同的文件夹中，这是一个非常有趣的观察结果，而且我认为这都是关于顺序的，不是名字。谢谢你提供这些信息