如何将三元实现为on-click处理程序

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>