javascript - 为什么我的组件之一不会使用 Hook 隐藏 onclick？

Question

我一直想不通为什么 Spin Now 在单击时不会隐藏。它正确地显示 Claim Now 单击 Spin Now 但是一旦 Claim Now 显示，我希望 Spin Now 隐藏.我正在使用 Hook ，我做错了什么？

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;