Машинопись и эмоция js, условный реквизит - PullRequest
Новая
       30

Машинопись и эмоция js, условный реквизит

0 голосов
/ 26 апреля 2020

В основном в моем магазине приставок у меня есть логическое состояние, где я go через реквизиты для использования условных выражений при применении css Но по какой-то причине мое:

background: $ {(props : HamburguerProps) => (props.open? 'Red': 'pink')};

всегда остается красным, даже если состояние имеет значение true или false

TSX: 

interface RootState {
  sideBarStatus: boolean;
}

interface SideBar {
  isOpen: boolean;
}

const LogoNavigation: React.FC<SideBar> = ({ isOpen }) => {
  const dispatch = useDispatch();
  return (
    <LogoSide open={isOpen} xd={isOpen ? 'blue' : 'pink'}>
      <img src={Logo} alt="Logo Elo Ghost" />
      <Hamburguer
        open={isOpen}
        onClick={() => dispatch(toggleSide(!isOpen))}
      >
        <div />
        <div />
        <div />
      </Hamburguer>
    </LogoSide>
  );
};
const SideNavigation: React.FC = () => {
  // const { sideIsOpen } = useSelector((RootState) => RootState.toggleSide);
  const selectIsOpen = (state: RootState) => state.sideBarStatus;
  const sideBarStatus = useSelector(selectIsOpen);
  console.log('sideBar', sideBarStatus);
  return (
    <SideNav>
      <LogoNavigation isOpen={sideBarStatus} />
    </SideNav>
  );
};

CSS: 

import styled from '@emotion/styled';

type HamburguerProps = {
  open: boolean;
};
export const LogoSide = styled.div<HamburguerProps>`
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 60px;
  background: ${(props: HamburguerProps) => (props.open ? 'red' : 'pink')};
  img {
    height: 50px;
  }
`;

Пример gif, где я показываю, что мое состояние меняется с true на false, и все же мой стиль не меняется:

enter image description here

пример:

https://codesandbox.io/s/great-galileo-zp3e7?file= / src /

1 Ответ

1 голос
/ 26 апреля 2020

isOpen - это не boolean, это объект, содержащий ключ sideIsOpen со значением boolean. object всегда правдив, поэтому ваш фон всегда красный . 

open={isOpen.sideIsOpen}

или даже лучше - используйте деструктурирование с селектором: 

const { sideIsOpen } = useSelector(selectIsOpen);

isOpen={sideIsOpen}
...