如何在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
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
复制相关文章
相似问题
腾讯云开发者
