javascript - 如何将三元实现为点击处理程序

Question

整个早上都在研究这个，似乎无法弄清楚这个三元表达式有什么问题。没有错误被记录，但表达式的第一部分从不计算。有什么想法吗？

<a className="buy-proposals-credits" onClick={userPaywallStatus === PAYWALL_STATUS_WAITING 
            ? () => openModal(PAYWALL_MODAL)
            : () => openModal(PROPOSAL_CREDITS_MODAL)}>(Manage proposal credits)</a>

Answer 1

三元运算符中的条件在您的应用程序安装时进行评估，而不是每次调用 render 时进行评估，因此由于 userPaywallStatus === PAYWALL_STATUS_WAITING 最初为 false表达式刚变成 () => openModal(PROPOSAL_CREDITS_MODAL)}>(Manage proposal credits)。

要解决此问题，您还需要将条件包装在一个函数中，以便在调用 onClick 时对其进行评估，如下所示:

<a className="buy-proposals-credits"
    onClick={
        () => userPaywallStatus === PAYWALL_STATUS_WAITING
            ? openModal(PAYWALL_MODAL)
            : openModal(PROPOSAL_CREDITS_MODAL)
    }
>
    (Manage proposal credits)
</a>