点击按钮时如何隐藏文本并显示不同的文本？

Question

我使用一个名为thirdweb的库与web3通信，但我的应用程序是用nextjs编写的。我希望按钮上方的文本能读到“您的钱包已连接”，但只在它们单击连接和连接之后。

    const[totalSupply, setTotalSupply] = useState(0);
    const[inProgress, setInProgress] = useState(false);
    const[completed, setCompleted] = useState(false);
    const address = useAddress();
    const connectWithMetamask = useMetamask();
    const disconnect = useDisconnect();
    const editionDrop = useEditionDrop("0xB636C1a63C3b092a7c74304B1947B0162D08a1e4");
    console.log(address);


    const mint = async () => {
        if(editionDrop && address){
            setInProgress(true);
            const tx = await editionDrop.claimTo(address, 0, 1)
            console.log(tx);
            setInProgress(false);
            setCompleted(true);
        }
    }

    const viewOpensea = () => {
        const url = "https://testnets.opensea.io/collection/1-year-anniversary"
        window.open(url, "_blank");
    }

    const startOver = () => {
        setCompleted(false);
        setInProgress(false);
        disconnectWallet();
    }

    useEffect(()=>{
        const getTotal= async () => {
            if(editionDrop){
                const total = await editionDrop.totalSupply(0)
                setTotalSupply(total.toNumber());
            }
        }
        getTotal();
    }, [editionDrop])

  return (
    <Container>
        <Mint>

            <TitleContainer>
                <Title>Welcome to the <br/> Redbrick NFT site</Title>
            </TitleContainer>

            <Count>
                <div>
                Your wallet {address} is connected!
                </div>
            </Count>

            <ButtonContainer>
                {
                    address 
                        ? <>
                            {
                            completed 
                                ?
                                <FilledButton onClick={viewOpensea}>View on OpenSea</FilledButton>
                                :
                                <FilledButton disabled={inProgress}onClick={mint}>
                            {
                                inProgress 
                                    ?<ReactLoading type="bubbles" color="#FFFFFF" height={30} width={65} />
                                    :
                                    <>mint</>
                            }
                             </FilledButton>
                        }
                        <UnfilledButton onClick={disconnect} disabled={inProgress}>Disconnect</UnfilledButton>
                        </>
                        : <FilledButton onClick={connectWithMetamask}>Connect Wallet</FilledButton>

                }
            </ButtonContainer>

            

        </Mint>

    </Container>
  )
}

现在，文本：<div> Your wallet {address} is connected! </div>计数一直存在。

Answer 1

只要满足条件，就尝试使用状态变量来呈现它。

isConnected ? <div> Your wallet {address} is connected! </div> : null

默认isConnected为false，然后在钱包连接时将其设置为true。