gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 19:16:30 25 4
gpt4 key购买 nike

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

侧边栏默认关闭

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

我检查过的东西:

  1. 侧边栏 CSS 中的 Flex 值正在正确更新
  2. 正在触发侧边栏事件并且正在正确更新 isOpen Hook
// 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>

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

JSFiddle 只有 HTML/CSS,但基本上达到了预期的效果:https://jsfiddle.net/5dLk9ex3/3/

最佳答案

你的代码的问题是在 reducer 范围内的某个地方(你的问题不完整),你的 Sidebar 在你调度一个 Action 后没有重新呈现。

工作示例:

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

Edit Q-58174270-StyledSidebarExample

关于css - 为什么 flex-value 没有在 styled-component 中更新?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58174270/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com