在滚动ReactJs上添加删除类

Question

我陷入了这个问题。我想在滚动上的标题元素上添加/删除类，但是以某种方式我无法管理它。

我试图挂载和卸载（在Stack上找到了几个解决方案），但在我的情况下不起作用。仅仅是因为在大多数情况下，代码都与组件相关，但是我的设置有些不同。

完整代码如下： https://codesandbox.io/s/angry-villani-lduor?fontsize=14

我想在store_details_header上添加新类

const handleChangeIndex = index => {
    setValue(index);
  };

  if (!selectedStore) {
    return null;
  }

  return (
    <div className="store-details">
      <div className="store-details__header" style={{ backgroundImage: `url(${selectedStore.headerBackgroundImgUrl})` }}>
        <img className="store-details__header__exit" src={exit} alt="exit" onClick={backToNearYou} />
        <img className="store-details__header__logo" src={selectedStore.headerLogoUrl} alt="logo" />
      </div>
      <div className="store-details__content" style={{ backgroundImage: `url(${selectedStore.contentBackgroundImgUrl})` }}>
        <div>
          <AppBar className={props.classes.root} position="static" color="default">
            <Tabs value={value} classes={{ indicator: props.classes.indicator }} onChange={setSelectedNavigationItem} variant="fullWidth">
              <StyledTab label="Products" />
              <StyledTab label="Items" />
            </Tabs>
          </AppBar>
          <SwipeableViews axis={'x'} index={value} onChangeIndex={handleChangeIndex}>
            <TabContainer>
              {' '}
              <div className="store-details__content__items">{renderSliderItems()}</div>
            </TabContainer>
            <TabContainer>
              {' '}
              <div className="store-details__content__items">{renderSliderItems()}</div>
            </TabContainer>
          </SwipeableViews>
        </div>
      </div>
      {guestMode && renderGuestModeBox()}
      {selectedStore.loyaltyCard && renderLoyaltyCard()}
    </div>
  );
};

  const handleChangeIndex = index => {
    setValue(index);
  };

  if (!selectedStore) {
    return null;
  }

  return (
    <div className="store-details">
      <div className="store-details__header" style={{ backgroundImage: `url(${selectedStore.headerBackgroundImgUrl})` }}>
        <img className="store-details__header__exit" src={exit} alt="exit" onClick={backToNearYou} />
        <img className="store-details__header__logo" src={selectedStore.headerLogoUrl} alt="logo" />
      </div>
      <div className="store-details__content" style={{ backgroundImage: `url(${selectedStore.contentBackgroundImgUrl})` }}>
        <div>
          <AppBar className={props.classes.root} position="static" color="default">
            <Tabs value={value} classes={{ indicator: props.classes.indicator }} onChange={setSelectedNavigationItem} variant="fullWidth">
              <StyledTab label="Products" />
              <StyledTab label="Items" />
            </Tabs>
          </AppBar>
          <SwipeableViews axis={'x'} index={value} onChangeIndex={handleChangeIndex}>
            <TabContainer>
              {' '}
              <div className="store-details__content__items">{renderSliderItems()}</div>
            </TabContainer>
            <TabContainer>
              {' '}
              <div className="store-details__content__items">{renderSliderItems()}</div>
            </TabContainer>
          </SwipeableViews>
        </div>
      </div>
      {guestMode && renderGuestModeBox()}
      {selectedStore.loyaltyCard && renderLoyaltyCard()}
    </div>
  );
};