如何在ReactJS中的3个组件之间切换
如何在ReactJS中的3个组件之间切换
提问于 2021-02-24 09:04:01
我很难在React中有条件地渲染组件。我已经成功地有条件地渲染了两个组件(A和B)，但是没有找到任何成功的方法来添加第三个组件(C
下面是两个组件的代码：
function App() {
const [click, setClick] = useState(true);
const ShowA = () => setClick(true);
const ShowB = () => setClick(false);
return (
<>
<br />
<button onClick={ShowA}>A </button>
<button onClick={ShowB}>B </button>
<div className="App">
{click && <div> A </div>}
{!click && <div>B</div>}
</div>
</>
);
}有没有可能添加第三个C组件，以便在它们之间切换？我已经试了2天了，但是没有成功。
如果有人感兴趣，这是Codesandbox的链接
https://codesandbox.io/s/musing-tesla-9gkpw?file=/src/index.js:100-481
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-02-24 09:15:00
您可以放置任意多个状态：
function App() {
const [displayA, setDisplayA] = useState(true);
const [displayB, setDisplayB] = useState(true);
const [displayC, setDisplayC] = useState(true);
const showA = () => {
setDisplayA(true);
setDisplayB(false);
setDisplayC(false);
}
const showB = () => {
setDisplayA(false);
setDisplayB(true);
setDisplayC(false);
};
const showC = () => {
setDisplayA(false);
setDisplayB(false);
setDisplayC(true);
};
return (
<>
<br />
<button onClick={showA}>A</button>
<button onClick={showB}>B</button>
<button onClick={showC}>C</button>
<div className="App">
{displayA && <div>A</div>}
{displayB && <div>B</div>}
{displayC && <div>C</div>}
</div>
</>
);
}您甚至可以在状态中添加其他内容，如JSX元素：
function App() {
const [elementToDisplay, setElementToDisplay] = useState("");
const showA = () => {
setElementToDisplay(<div>A</div>)
}
const showB = () => {
setElementToDisplay(<div>B</div>)
}
const showC = () => {
setElementToDisplay(<div>C</div>)
}
return (
<>
<br />
<button onClick={showA}>A</button>
<button onClick={showB}>B</button>
<button onClick={showC}>C</button>
<div className="App">
{elementToDisplay}
</div>
</>
);
}Stack Overflow用户
发布于 2021-02-24 09:19:11
您可以保存当前按钮的状态，然后使用对象查找有条件地显示不同的按钮：
检查https://codesandbox.io/s/kind-haslett-b0fv0
function App() {
const [currentButton, setCurrentButton] = useState('A');
return (
<>
<br />
<button onClick={() => setCurrentButton('A')}>A</button>
<button onClick={() => setCurrentButton('B')}>B</button>
<button onClick={() => setCurrentButton('C')}>C</button>
<div className="App">
{
({
A: <div>A</div>,
B: <div>B</div>,
C: <div>C</div>
})[currentButton]
}
</div>
</>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66343243
复制相关文章
相似问题
腾讯云开发者
