我如何將這個 function 從 app.js 中移出？

Question

我打算從我的 app.js 中移出邏輯。 現在，在 app.js 中，我有一個 function 更改了 App.js 中一些變量的 state。 我想通過讓 app.js 調用另一個組件中的 function（例如單擊）來了解在 app.js 中更改 state 的正確方法是什么。

我的 app.js 如下所示：

const App = () => {
    const [opacity, opacitySet] = React.useState(1);
    const [showStep, setDisplayStep] = React.useState(true);
    const [isQrActive, setQrState] = React.useState(false);
    
/** code **/

  <ButtonContinue
    onClick={() => {
       stateChanger();
    }}
    style={{ backgroundColor: "black" }}
  >
    <p>cancel</p>
  </ButtonContinue>

/** lots of code **/

 function stateChanger() {  

   opacitySet(0);
     setTimeout(() => {

       opacitySet(1);
       setDisplayStep(!showStep);
       setQrState(!isQrActive);
     }, 400);

 }

/** and more code **/

}

我想將 stateChanger function 從 app.js 中移出，但仍保持相同的功能。 這反過來又使我可以輕松地從其他類調用 stateChanger。

Answer 1

最簡單的解決方案（也是最難擴展的）是將 function 作為 prop 傳遞給它的孩子。 您還可以創建自定義掛鈎。 但是通過在根級組件 App 上聲明 state 並詢問您通常如何從另一個組件修改它，我們可以解釋這個問題本質上是關於如何處理全局 state。您可能需要考慮使用 Context API 或Redux，它們是專門為此目的創建的工具。

這里要記住的最重要的事情是，如果我們可以選擇將 state 維護在合理接近它被使用和修改的地方，我們應該這樣做而不是將其作為全局 state 的一部分處理。