为什么我的一个组件不会使用钩子隐藏点击？

Question

对于我的生活，我无法弄清楚为什么Spin Now在单击它时不会隐藏。 单击Spin Now它正确地显示Claim Now，但是一旦显示Claim Now，我希望隐藏Spin Now。 我在使用钩子，我做错了什么？

import React, { useState } from 'react';
import SpinNowButton from '../../components/SpinNowButton/SpinNowButton';
import ClaimNowButton from '../../components/ClaimNowButton/ClaimNowButton';
import './Buttons.css';
const Buttons = () => {
const [showSpin, setShowSpin] = useState(false);
const [showClaim, setShowClaim] = useState(false);
return(
<div className="both-buttons">
<SpinNowButton onClick={() => setShowClaim(true)}/>
{showClaim ? <ClaimNowButton/> : null}
{showSpin ? <SpinNowButton/> : null}
</div>
);
};
export default Buttons;

Answer 1

因此，您只需要一段状态即可完成此操作，并将其设置为与以前的值相反的值。然后，下面的三元组件将呈现一个组件(如果为真(，如果为假，则呈现另一个组件。

编辑 - 我认为这更接近您正在寻找的内容：

import React, { useState } from 'react';
import SpinNowButton from '../../components/SpinNowButton/SpinNowButton';
import ClaimNowButton from '../../components/ClaimNowButton/ClaimNowButton';
import './Buttons.css';
const Buttons = () => {
const [showClaim, setShowClaim] = useState(false);
const handleCLick = () => {setShowClaim(!showClaim)}
return(
<div className="both-buttons">
{showClaim ? null : <SpinNowButton onClick{() => handleClick()}/>}
{showClaim ? <ClaimNowButton onClick{() => handleClick()}/> : null}
</div>
);
};
export default Buttons;

Answer 2

一个可以灵活添加更多类型(如 claim/spin(的实现：

import React, { useState } from 'react';
import SpinNowButton from '../../components/SpinNowButton/SpinNowButton';
import ClaimNowButton from '../../components/ClaimNowButton/ClaimNowButton';
import './Buttons.css';
const Buttons = () => {
const [shownItems, setShownItems] = useState(['spin']);
return(
<div className="both-buttons">
{shownItems.contains('claim') && <ClaimNowButton onClick={() => setShownItems('spin')}/>}
{shownItems.contains('spin') && <SpinNowButton onClick={() => setShownItems('claim')}/>}
</div>
);
};
export default Buttons;