时间戳

首页 > 解决方案 > 使用钩子在 reactjs 中传递函数的正确方法

reactjs - 使用钩子在 reactjs 中传递函数的正确方法

问题描述

您好我有一个关于将函数传递给孩子的正确方法的问题基本上在我的最高级别组件中，我有一个主题：

export default function App() {
  const { theme, setTheme } = useAppTheme();

  useEffect(() => {});

  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <div className="App">
        <Header />
      </div>
    </ThemeProvider>
  );
}

这是我获取和设置主题的自定义钩子：

export default function useAppTheme(defaultTheme = lightTheme) {
  const [theme, _setTheme] = useState(getInitialTheme);

  function getInitialTheme() {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark' || savedTheme === 'light') {
      return JSON.parse(savedTheme) === 'dark' ? darkTheme : defaultTheme;
    } else {
      return defaultTheme;
    }
  }

  useEffect(() => {
    localStorage.setItem('theme', JSON.stringify(theme.type));
  }, [theme]);

  return {
    theme,
    setTheme: ({ setTheme, ...theme }) => {
      if (theme.type === 'dark') {
        return _setTheme(darkTheme);
      } else {
        return _setTheme(lightTheme);
      }
    },
  };
}

然后在我的组件标题中，我使用 EMOTION Theme 中的 useTheme

const Header = () => {
  const Theme = useTheme();
  return (
    <Container theme={Theme}>
      <TopHeader theme={Theme} />
      <NavBar theme={Theme} />
    </Container>
  );
};

然后我有一个组件，它是我的标题的子组件，我需要我的 setTheme 函数来更改主题：

const ItemsTop = props => {
  return (
    <WrapperTop
      justify={'space-between'}
      align={'center'}
      flexdirection={'row'}
    >
      <img src={LogoImg} />
      <SearchContainer>
        <div>
          <FontAwesomeIcon
            className="searchIcon"
            icon={faSearch}
            size="2x"
            fixedWidth
            color="white"
          />
        </div>
        <input placeholder="Pesquisar"></input>
      </SearchContainer>

      <AccessibilityTwo>
        <FontAwesomeIcon
          className="adjust"
          icon={faAdjust}
          size="1x"
          fixedWidth
          color="white"
        />
        <FontAwesomeIcon
          icon={faTextHeight}
          size="1x"
          fixedWidth
          color="white"
        />
      </AccessibilityTwo>
    </WrapperTop>
  );
};

所以我想知道将我的 setTheme 函数从我的自定义钩子传递给我的组件 Header 的子级的正确方法是什么

标签： reactjsreact-hooks

解决方案

我不知道您是如何使用该ItemsTop组件的，但想象一下您在以下位置调用它Header：

const Header = () => {
  const Theme = useTheme();
  return (
    <Container theme={Theme}>
       ...
      <ItemsTop setTheme={props.setTheme}/>
    </Container>
  );
};

上面的代码是将函数传递setTheme给 的 props ItemsTop，但是要让这个函数出现在 的props中，Header你必须像这样传递它：

export default function App() {
  const { theme, setTheme } = useAppTheme();

  useEffect(() => {});

  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <div className="App">
        <Header setTheme={setTheme} />
      </div>
    </ThemeProvider>
  );
}

最后，您可以在ItemsTop访问道具时使用它：props.setTheme

推荐阅读