为什么 flex-value 没有在 styled-component 中更新？

Question

我有一个侧边栏和一些主要内容。主要内容占据了屏幕的大部分，而侧边栏应该只占据一小部分。我有一个父容器，它是一个 flexbox。两个子元素（侧边栏和主要内容）都是 div 元素。

侧边栏默认关闭

问题：切换侧边栏不会按预期展开侧边栏

我检查过的东西：

边栏中的 Flex 值 css 正在正确更新
正在触发边栏事件并且正在正确更新 isOpen 挂钩

// main.ts
import styled from 'styled-components';

export const Content = styled.div`
    flex: 4;
    margin-top: 1em;
    margin-bottom: 2em;
    height: 100vh;
`;

export const Container = styled.div`
    display: flex;
`;

// sidebar/styles.ts

import styled from 'styled-components';

interface RootProps {
    isOpen: boolean;
}

export const Root = styled.div<RootProps>`
    padding: 1em;
    background-color: ${DARK};
    flex: ${({ isOpen }: RootProps) => (isOpen ? 1 : 0)};
`;

// sidebar/index.tsx
export const Sidebar: React.FC = () => {
    const dispatch = useDispatch();
    const isOpen = useSidebar();

    const handleOpen = () => dispatch(toggleSidebar());

    return (
        <Root isOpen={isOpen}>
            <Button onClick={handleOpen}>
                CLICK ME
            </Button>
        </Root>
    );
};

// Usage
// Sidebar styles mirror what's in the sidebar styled component file

<Container>
   <Sidebar />
   <Content />
</Container>

预期结果是侧边栏在切换按钮时展开和折叠。没有显示任何错误消息，侧边栏弹性值正在正确更新。

JSFiddle 只有 HTML / CSS 但本质上是预期的效果：https://jsfiddle.net/5dLk9ex3/3/

Answer 1

你的代码的问题是在 reducer 范围内的某个地方（你的问题不完整），你的 Sidebar 在你调度一个动作后没有重新呈现。

工作示例：

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';

const Container = styled.div`
  display: flex;
`;

const First = styled.div`
  flex: ${({ isOpen }) => (isOpen ? 1 : 0)};
  background-color: red;
  height: 20px;
`;

const Second = styled.div`
  flex: 4;
  background-color: green;
  height: 20px;
`;

const DEFAULT_INITIAL = false;

const App = () => {
  const [isOpen, setIsOpen] = useState(DEFAULT_INITIAL);

  const onClick = () => {
    console.log('Toggle Sidebar');
    setIsOpen(p => !p);
  };

  return (
    <>
      <Container>
        <First isOpen={isOpen}>FIRST</First>
        <Second>SECOND</Second>
      </Container>
      <button onClick={onClick}>OpenSider</button>
    </>
  );
};

Please refer to the first comment of this answer

Answer 2

我不确定为什么，但是将主要内容 div 设置为 min-width: 0 解决了问题。查看更多：

为什么 flex-value 没有在 styled-component 中更新？

Why is the flex-value not updating in the styled-component?

css

flexbox

typescript

reactjs

styled-components