React - 从另一个组件切换主题

Question

I am working on a project on react but I have ran into an issue.

The issue I am having is that I need to be able to toggle my "dark" and "light" theme from a icon that is in a different component. This icon exists in my BottomNavigation but the function for switching the theme exists in my app.js .

Did some research on my own and found that I need to "lift the state up". Issue is that I need to lift it twice as my files look like this:

./Components
  ./Home.js
    - (components gets added here)
  ./Navigation
    ./BottomNavigation.js

app.js
(/home is added here)

My app.js looks like:

function App() {
  const [theme, setTheme] = useState("light");

  const themeToggler = () => {
    theme === "light" ? setTheme("dark") : setTheme("light");
  };

  return (
    <ThemeProvider theme={theme === "light" ? lightTheme : darkTheme}>
      <GlobalStyles />
      <Router>
        <Route exact path="/">
          <Home />
        </Route>
        <Route exact path="/account">
          <Account />
        </Route>
      </Router>
    </ThemeProvider>
  );
}

My Home.js looks like:

const Home = (props) => {
  const [showingState, setIsShowing] = useState(false);

  return (
    <div>
      <TopNavigation isShowing={(showingState) => setIsShowing(showingState)} />
      <BottomNavigation />
      <ImageSlider />
      <Grid />
      {showingState && (
        <CurrencyPopup
          isShowing={(showingState) => setIsShowing(showingState)}
        />
      )}
      <BestSeller />
      <CollectionPromo />
      <Instagram />
      <Footer />
    </div>
  );
};

My BottomNavigation.js looks like (only took the part with the icon):

<div className={classes.options_container}>
  <IconApp className={classes.icon_container}>
    <span className={classes.cart_sum}>$0.00</span>
    <Cart className={classes.icon} />
  </IconApp>
  <IconApp className={classes.icon_container}>
    <Heart className={classes.icon} />
  </IconApp>
  <IconApp className={classes.icon_container}>
    <Visibility
      onClick={() => props.setTheme("")} //This icon shall switch the theme
      className={classes.icon}
    />
  </IconApp>
  <IconApp className={classes.icon_container}>
    <a href="/account">
      <User className={classes.icon} />
    </a>
  </IconApp>
</div>

If you have any ideas or need something more from the code, let me know!

Answer 1

For best practice, you have a few options:

1. Use React Context .
2. Use a state management library like Redux and MobX .

You definitely don't want to life state up in your case, because the two components are too far away from each other in the hierarchy.

Answer 2

Lifting state up would be solution that does not require any additional knowledge. However, its excessive use (over three or more component) is a bad practice, since it makes code dirty

Using RecoilJS would be easiest, since its api is nearly identical to that of useState , and there is less work for you to do

Sticking to vanilla ReactJS, try React Context