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

【问题标题】：Correct way to pass function in reactjs with hooks使用钩子在 reactjs 中传递函数的正确方法
【发布时间】：2020-02-18 22:08:02
【问题描述】：

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

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 的子级的正确方法是什么

【问题讨论】：

你试过作为道具传递吗？
@Victor Ferreira 我没有尝试，因为我不知道最好的方法是在我的 cmoponent 儿子或我的头中

标签： reactjs react-hooks

【解决方案1】：

我不知道您是如何使用ItemsTop 组件的，但假设您在Header 中调用它：

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

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

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

  useEffect(() => {});

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

最后，你可以在ItemsTop使用它来访问props：props.setTheme

【讨论】：