AMP初始渲染时data-amp-bind-hidden不生效，页面加载时两按钮同时显示

问题原因 #

AMP 的 data-amp-bind-* 系列绑定属性仅在状态触发更新时才会生效，页面首次加载阶段不会自动计算初始状态来设置元素属性，所以你两个按钮的初始 hidden 属性都没有被赋值，就会同时显示。

修复方案 #

给两个按钮元素增加初始的 hidden 属性，和你 amp-state 里的初始 newState 值（也就是服务端传入的 isAddedTofav）对齐即可：

<div
    className="ops-icon"
    on={
        'tap:AMP.setState({ favState: { newState: false }}),toggle-favorite-form.submit'
    }
    role="add-to-fav"
    tabIndex="0"
    {/* 初始隐藏条件和绑定逻辑对齐：newState为false时隐藏 */}
    hidden={!isAddedTofav}
    data-amp-bind-hidden="favState.newState == false"
>
    <Favorite />
</div>

<div
    className="ops-icon"
    on={
        'tap:AMP.setState({ favState: { newState: true }}),toggle-favorite-form.submit'
    }
    role="remove-from-fav"
    tabIndex="1"
    {/* 初始隐藏条件和绑定逻辑对齐：newState为true时隐藏 */}
    hidden={!!isAddedTofav}
    data-amp-bind-hidden="favState.newState == true"
>
    <NoneFavorite />
</div>

修改后页面加载时就会根据初始收藏状态只展示对应按钮，点击切换的逻辑也不会受影响。

内容的提问来源于stack exchange，提问作者Omar Dulaimi