React（styled-components）滑块组件初始位置偏移问题调试求助

问题原因 #

你当前的代码逻辑把初始状态和偏移对应关系搞反了：

• 初始scroll状态默认值设为了left
• 样式规则中active==='left'对应偏移230px，所以页面加载完成后卡片直接就有了230px的偏移量

修复步骤 #

1. 修改父组件初始状态值
   打开containers/card.js，把初始state的默认值从left改为right，初始状态就会触发0偏移的样式规则：

// 修改前
const [scroll,setScroll]=useState('left')
// 修改后
const [scroll,setScroll]=useState('right')

2. 调整左内边距（可选）
   如果修改后卡片和左箭头还有50px的间距，打开components/card/styles/card.js，调整List的margin-left属性，比如设置为0就能让卡片完全紧贴左侧箭头：

export const List=styled.div`
/* 把margin-left改成你需要的数值 */
margin-left:0;
display:flex;
width:max-content;
margin-top:10px;
transform:${({ active }) => (active==='left'  ? 'translateX(230px)' : 'translateX(0px)')}
`

3. 偏移方向调整（可选）
   如果点击左箭头后你需要卡片向左移动（显示左侧隐藏内容），把translateX(230px)改为translateX(-230px)即可，正数是向右偏移，负数是向左偏移。

如果后续需要实现多卡片连续滑动，可以把scroll状态改为存储数字类型的偏移量，每次点击加减230px，再加上边界值限制，就能支持多张卡片的连续滚动效果。

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