Правильный способ передать функцию в reactjs с крючками

Question

Здравствуйте, у меня есть вопрос о правильном способе передачи функции детям. В основном, в моем компоненте самого высокого уровня у меня есть тема:

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);
      }
    },
  };
}

и затем в заголовке моего компонента я использую useTheme из темы EMOTION

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

Answer 1

Я не знаю, как вы используете компонент ItemsTop, но представьте, что вы вызываете его в Header:

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

Приведенный выше код передает функцию setTheme в реквизиты 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