javascript 如何基于URL更新状态而不使用效果

eyh26e7m  于 2023-02-18  发布在  Java
关注(0)|答案(1)|浏览(106)

在故事书中,当有某些组件时,主题应该设置为浅色模式。
为了检查当前组件,使用当前URL。
这是检查URL是否包含这些组件之一的方法,它工作正常:

const checkURL = () => {
  const url = window.location.href;
  const componentsToCheck = ['radio-group', 'tabs'];
  return !componentsToCheck.some((component) => url.includes(component));
}

这里用到了

addDecorator((story) => {
  const { currentTheme, setCurrentTheme, themeWithDynamicColors } = useSwitchTheme();

  useEffect(() => {
    if (!checkURL()) {
      setCurrentTheme('light');
    }
  }, [currentTheme]);

  return (
    <SwitchThemeContext.Provider value={{ theme: currentTheme, setTheme: setCurrentTheme }}>
      <ThemeProvider theme={themeWithDynamicColors}>
        <>
         ...
        </>
      </ThemeProvider>
    </SwitchThemeContext.Provider>
  );

它工作正常,但我认为useEffect不是强制性的,使它工作。有没有办法更新currentThemelight的基础上checkURL()没有useEffect

fykwrbwg

fykwrbwg1#

我会尝试用途:

useEffect(() => {
    if (!checkURL()) {
      setCurrentTheme('light');
    }
  }, [window.location.href]);

检查URL更改时是否有任何更改。

相关问题