使用useStates在js中反应如何一次显示一个div

Question

我有3个div和3个按钮是通过react js样式组件创建的，我想知道如何在页面加载时默认显示一个div，当用户单击其他两个按钮时，我希望该div显示，其他div使用useStates消失。

这是我想做的创建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>

}

Answer 1

您可以使用条件渲染进行管理。

function App() {
const [visableDiv, setVisableDiv] = useState("Div 1");
const setDivToVisable = (displayDiv) => {
setVisableDiv(displayDiv);
};
<Maincontainer>
<Divbtncontainer>
<Div1btn onClick={() => setDivToVisable('Div 1')}>Div 1</Div1btn>
<Div2btn onClick={() => setDivToVisable('Div 2')}>Div 2</Div2btn>
<Div3btn onClick={() => setDivToVisable('Div 3')}>Div 3</Div3btn>
</Divbtncontainer>
<Divscontainer>
{visableDiv === "Div 1" && (
<Div1>
<h2>This is div 1 </h2>
</Div1>
)}
{visableDiv === "Div 2" && (
<Div2>
<h2>This is Div 2 </h2>
</Div2>
)}
{visableDiv === "Div 3" && (
<Div3>
<h2>This is div 3 </h2>
</Div3>
)}
</Divscontainer>
</Maincontainer>;
}

Answer 2

没有重复的代码，您可以添加尽可能多的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>
);
};

Answer 3

您可以将div放入数组中，在选定的索引处呈现div(默认为0)，然后在单击按钮时更改索引。

const elements = [
<Div1>
<h2>This is div 1 </h2>
</Div1>,
<Div2>
<h2>This is div 2 </h2>
</Div2>,
<Div3>
<h2>This is div 3 </h2>
</Div3>,
];
function App() {
const [index, setIndex] = useState(0);
function clickHandler(index) {
return () => setIndex(index);
}
return (
<Maincontainer>
<Divbtncontainer>
<Div1btn onClick={clickHandler(0)}>
Div 1
</Div1btn>
<Div2btn onClick={clickHandler(1)}>
Div 2
</Div2btn>
<Div3btn onClick={clickHandler(2)}>
Div 3
</Div3btn>
</Divbtncontainer>
<Divscontainer>
{elements[index]}
</Divscontainer>
</Maincontainer>
);
}

有更好和更可扩展的方法来做这种事情，但它们不太适合你的例子，因为你在每个位置都使用独特的组件。我不确定为什么Div2btn,Div3Btn,Div2和Div3存在，当它们与Div1btn和Div1相同时。