從 INNER function 導出和返回變量的方法

Question

我有一個 jsx 文件，我們稱它為 A，它是這樣的：

export default function Outer() {

    function inner() {
        *some logic here*
        return variable
    }
    
    function inner2() {
        *some logic here*
    }
    
    function inner3() {
        *some logic here*
    }

    return (
        *various items here*
    )
}

我需要將 function inner() 導出到另一個文件，我們稱之為 B，因為文件 B 需要能夠讀取從 function inner() 返回的變量

但是，我無法編寫 export function inner()，因為只能在頂層調用導出。

也不可能將 function inner() 移動到頂層，因為它依賴於 function inner2() 和 function inner 的邏輯。

尋找有關我如何可能處理此問題的建議。 我做了一些閱讀，看到了諸如 useSWR hook、react context API 和 redux 之類的東西。 我目前都不知道。

對於像我這樣的初學者，誰能推薦哪種解決方案最適合我的情況，以及哪種解決方案最容易實施？

此外，除了我遇到的這 3 件事之外，還有其他解決方案可以同樣有效，但我錯過了？

Answer 1

const newOuter = (()=>{

function inner(){

    return "inner" + inner2() + inner3();
}

function inner2(){

    return " inner2"
}

function inner3(){

    return " inner3"
}

function original(params){
    /*various items here*/
    
    return params;
}

return {
    inner,
    original
}
})()

export default newOuter;

//B.js

import newOuter from './newOuter.js'

const innerReturnValue = newOuter.inner()

因此，您可以調用newOuter.original()並獲取outer function 的原始返回值，如果您只需要inner function ，則可以調用newOuter.inner() 。