提问人：Brandon W 提问时间：5/31/2023 最后编辑：skyboyerBrandon W 更新时间：5/31/2023 访问量：108
React 水平扩展
React Horizontal expand
问：
反应水平扩展。我在 React 中为这么简单的事情而苦苦挣扎。我正在尝试在单击按钮时将我的 Div 容器从 500px 扩展到 900px 或全宽。我只能让它出现和消失。请问我错过了什么？使用 React 钩子。提前致谢
代码笔：
codepen.io/brandonwirz/pen/dygBPrb
`
反应水平扩展。我很接近，但在折叠时容器消失了。同样，我希望
容器从 500px 左右变为 900px 或全宽，反之亦然。
const Collapse = ({ collapsed, expanded, children }) => {
const [isCollapsed, setIsCollapsed] = React.useState(collapsed)
// const [isExpanded, setIsExpanded] = React.useState("");
return (
<div className="container">
<button
className="collapse-button"
onClick={() => setIsCollapsed(!isCollapsed)}
>
{isCollapsed ? "Show small" : "Show expanded"} content
</button>
<div
className={`collapse-content ${isCollapsed ? "collapsed" : "expanded"}`}
aria-expanded={isCollapsed}
>
{children}
</div>
</div>
)
}
````
答：
0赞
pjaoko
5/31/2023
#1
js 工作正常，问题出在 CSS 上。您看不到这些更改，因为您已将容器的宽度设置为 500px，并为其指定了边框。应删除这些样式，并改为在 .collapse-content 上设置。
.container {
height: 300px;
padding:10px;
}
.collapse-button {
width: 180px;
}
.collapse-content {
border: solid 3px grey;
margin-top: 1em;
}
.collapse-content.collapsed {
width:500px;
}
.collapsed-content.expanded {
width:900px;
}
评论
0赞
Brandon W
5/31/2023
谢谢你看了太久，感谢你的帮助——一切正常。
0赞
John Ocean
5/31/2023
#2
在 CSS 中：
你写了这个
.collapsed-content.expanded { width:900px; }
这是错误的。
写这个
.collapse-content.expanded { width:900px; }
这是一个拼写错误。
评论
0赞
Brandon W
5/31/2023
谢谢你忽略了我的拼写错误。修复了 CSS.codepen.io/brandonwirz/pen/dygBPrb
评论