在js中使用useStates react如何一次显示一个div
在js中使用useStates react如何一次显示一个div
提问于 2021-10-06 07:33:24
我有3个div和3个按钮是通过样式组件是react js创建的，我想知道如何在页面加载时默认显示一个div，当用户单击其他两个按钮时，我希望使用useStates显示该div和消失其他div。
这就是我想要做的事情，创建useState和一个参数为"displayDiv“的函数，也许可以通过单击其中一个按钮将所选的div作为参数传递，但我不知道该怎么做。
const Maincontainer = styled.div`
border: 1px solid black;
`
const Divbtncontainer = styled.div`
border: 1px solid black;
display: flex;
justify-content: center;
`
const Div1btn = styled.button`
border-radius: 20px;
margin-right: 10px;
background: #D3D3D3;
width: 15%;
cursor: pointer;
&:hover{
background: #1B1212;
color: cyan;
transition: ease-in-out 0.3s;
}
`
const Div2btn = styled.button`
border-radius: 20px;
margin-right: 10px;
background: #D3D3D3;
width: 15%;
cursor: pointer;
&:hover{
background: #1B1212;
color: cyan;
transition: ease-in-out 0.3s;
}
`
const Div3btn = styled.button`
border-radius: 20px;
margin-right: 10px;
background: #D3D3D3;
width: 15%;
cursor: pointer;
&:hover{
background: #1B1212;
color: cyan;
transition: ease-in-out 0.3s;
}
`
const Divscontainer = styled.div`
display: flex;
justify-content: center;
`
const Div1 = styled.div`
text-align: center;
border: 1px solid black;
`
const Div2 = styled.div`
text-align: center;
border: 1px solid black;
`
const Div3 = styled.div`
text-align: center;
border: 1px solid black;
`
function App() {
const [visableDiv, setVisableDiv] = useState();
function setDivToVisable(displayDiv){
setVisableDiv(displayDiv)
}
<Maincontainer>
<Divbtncontainer>
<Div1btn>
Div 1
</Div1btn>
<Div2btn>
Div 2
</Div2btn>
<Div3btn>
Div 3
</Div3btn>
</Divbtncontainer>
<Divscontainer>
<Div1>
<h2>This is div 1 </h2>
</Div1>
<Div2>
<h2>This is div 2 </h2>
</Div2>
<Div3>
<h2>This is div 3 </h2>
</Div3>
</Divscontainer>
</Maincontainer>
}Stack Overflow用户
发布于 2021-10-06 09:20:44
没有重复的代码，您可以添加任意数量的div：
import {useState } from 'react'
const divs = [
<div>
<h2>This is div 1 </h2>
</div>,
<div>
<h2>This is div 2 </h2>
</div>,
<div>
<h2>This is div 3 </h2>
</div>,
];
export const App= () => {
const [visibleDivIndex, setVisibleDivIndex] = useState(0);
return (
<div>
<div id="container">
{divs.map((_, index) => (
<button onClick={() => setVisibleDivIndex(index)}>
Div {index + 1}
</button>
))}
</div>
<div>{divs[visibleDivIndex]}</div>
</div>
);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69461541
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号