我如何将此功能从 app.js 移出？

Question

我打算从我的 app.js 中移出逻辑。现在，在 app.js 中，我有一个函数可以更改 App.js 中某些变量的状态。我想通过让 app.js 调用另一个组件中的函数（例如单击）来了解更改 app.js 内状态的正确方法。

我的 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 函数从 app.js 移出，但仍保留相同的功能。这反过来又可以让我轻松地从其他类调用 stateChanger。

Answer 1

最简单的解决方案（也是最难扩展的）是将函数作为 prop 传递给它的 children。您还可以创建自定义挂钩。但是通过在 root-level 组件 App 上声明状态并询问您通常如何从另一个组件修改它，我们可以解释这个问题本质上是关于如何处理全局状态的。您可能需要考虑使用 Context API 或 Redux，它们是专门为此目的创建的工具。

这里要记住的最重要的事情是，如果我们可以选择将状态保持在合理接近它被使用和修改的位置，我们应该这样做而不是将其作为全局状态的一部分处理。

我如何将此功能从 app.js 移出？

How can i move this function out from app.js?

javascript

reactjs

react-hooks

react-state