如何在 windows.variable 全局变量更改时触发 useEffects

Question

我正在加载这两个文件，我有一个名为 routes 的变量，我想根据来自另一个组件的点击更改它。我有一个名为 window.showhide 的全局变量，它是布尔值，另一个 window.route 是一个对象数组。我想从另一个组件切换 window.showhide 并使用 useEffect 触发器。使用 window.showhide useEffects 不会触发。我只想将 window.route 从另一个组件更改为 route2。请帮我解决这个问题。

import route1 from "./routes1"
import route2 from ".routes2"
window.showhide = false
window.route = route1
const routes = window.route

export default function App() {
  useEffect(() => {
     if(window.showhide){
         routes = route2
     } else {
         routes = route1
    }
  }, [window.showhide]);
}

Answer 1

useEffect 无法监听变量的变化，然后导致组件重新渲染。相反，您的组件必须已经由于其他原因重新渲染，然后依赖项数组决定是否运行在 useEffect 中找到的额外代码。

如果你想在react中渲染一个组件，你需要设置state。因此，针对您这种问题的典型解决方案是在 App 中设置一个状态变量，然后传递一个让 child 设置该状态的函数。

export default function App() {
  const [routes, setRoutes] = useState(route1);

  const showHide = useCallback((value) => {
    setRoutes(value ? route1 : route2);
  }, []);

  return (
    <ChildComponent showHide={showHide} />
  );
}

// In the child:
function ChildComponent({ showHide }) {
  return <div onClick={() => showHide(true)} />
}

如果组件彼此相距很远，那么通过 props 向下传递可能会很痛苦，在这种情况下，您可以改用上下文：

const ShowHideContext = createContext(() => {});

export default function App() {
  const [routes, setRoutes] = useState(route1);

  const showHide = useCallback((value) => {
    setRoutes(value ? route1 : route2);
  }, []);

  return (
    <ShowHideContext.Provider value={showHide}>
      <ChildComponent />
    </ShowHideContext.Provider>
  );
}

// Elsewhere:

function Example () {
  const showHide = useContext(ShowHideContext);

  return <button onClick={() => showHide(true)} />
}

如何在 windows.variable 全局变量更改时触发 useEffects

How to to trigger useEffects on windows.variable Global Variable change

jsx

reactjs

use-effect