React/TSX/Styled-Components中如何根据侧边栏状态调整视频列数？

问题场景 #

开发YouTube克隆时，期望侧边菜单打开（openMenu=true）时视频容器显示4列，菜单关闭（openMenu=false）时显示5列，但列数未按预期变化。

问题排查与修复步骤 #

1. 确认状态传递与样式生效 #

首先验证核心逻辑是否正常运行：

• 在浏览器开发者工具中查看Home组件的Container元素，检查grid-template-columns属性是否随openMenu状态切换为repeat(4, 1fr)或repeat(5, 1fr)。
• 在Home组件中添加console.log(openMenu)，确认状态在菜单开关时正确切换为true/false。

2. 修正视频卡片的样式问题 #

当前代码存在几处细节错误，同时可优化样式让列数变化更直观：

// VideoComponent/styles.ts
import styled from "styled-components";

export const Container = styled.div`
    width: 100%;
    max-width: 360px; /* 添加最大宽度，避免列宽过大导致列数变化不明显 */
`;

export const ImagemBanner = styled.img`
    width: 100%;
    height: 210px;
    border-radius: 12px;
    object-fit: cover; /* 确保图片比例正确，避免拉伸变形 */
`;

export const TitleContainer = styled.div`
    width: 100%;
    display: flex;
    margin-top: 12px;
`;

export const ChannelImage = styled.div`
    background-color: beige;
    width: 40px;
    height: 40px; /* 修正拼写错误：heigth → height */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-right: 10px;
    flex-shrink: 0; /* 防止头像被压缩变形 */
`;

export const TextContainer = styled.div`
    display: flex;
    flex-direction: column;
    gap: 4px;
`;

export const Title = styled.span`
    font-weight: 600;
    color: #0f0f0f;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; /* 限制标题显示两行，避免布局错乱 */
`;

export const TextCard = styled.span`
    color: #8c8c8c; /* 修正颜色值：缺少#符号 */
    font-size: 14px;
`;

3. 确保容器布局上下文正确 #

如果侧边菜单采用固定定位（fixed），需让Home容器在菜单打开时自动适配剩余宽度。可将侧边菜单与Home容器放在flex布局中：

// 示例App组件布局
import styled from "styled-components";
import Home from "./Home";
import Sidebar from "./Sidebar";
import { useState } from "react";

const AppContainer = styled.div`
    display: flex;
    width: 100%;
`;

const MainContent = styled.div`
    flex: 1;
    padding: 20px;
`;

function App() {
    const [openMenu, setOpenMenu] = useState(true);
    
    return (
        <AppContainer>
            <Sidebar openMenu={openMenu} setOpenMenu={setOpenMenu} />
            <MainContent>
                <Home openMenu={openMenu} />
            </MainContent>
        </AppContainer>
    );
}

4. 验证最终效果 #

修改完成后，当openMenu=true时，Home容器会显示4列视频；openMenu=false时显示5列。可通过开发者工具确认grid-template-columns的取值是否随状态正确切换。

内容的提问来源于stack exchange，提问作者ArticZ