Question

基本上在我的redux商店中，我有一个布尔状态，当我应用CSS时，我会通过道具来使用条件但是出于某种原因：

背景：$ {（props：HamburguerProps）=>（props.open？'red'： '粉红色'）};

即使状态为true或false，也始终保持红色

TSX：

\\t

CSS：

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

一个示例gif文件，其中显示了我的状态从“真”变为“假”，而我的样式却没有改变：

示例：

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

Answer 1

<!DOCTYPE html> <html> <head> </head> <body> <h1>Realtime communication with WebRTC</h1> <div id="videos"> <video id="localVideo" autoplay muted></video> <video id="remoteVideo" autoplay></video> </div> <canvas id="_canvas"></canvas> </body> </html>不是一个isOpen，它是一个对象，其中包含带有boolean值的sideIsOpen键。 boolean总是真实的，这就是为什么您的背景总是 red 。

object

甚至更好-将解构与选择器一起使用：

open={isOpen.sideIsOpen}

Typescript和Emotion js，条件道具

1 个答案: