amp hidden 在初始渲染时不起作用答案

【问题标题】：amp hidden does not work on initial renderamp hidden 在初始渲染时不起作用
【发布时间】：2021-10-03 16:05:09
【问题描述】：

我有两个按钮根据状态值显示两个不同的图标。当组件首次加载时，我希望其中一个按钮可见。

这是我现在的代码：

            <form
                method="post"
                action-xhr={`${hostName}/api/${itemId}/toggleFav`}
                target="_top"
                id="toggle-favorite-form"
                dir="rtl"
                encType="application/x-www-form-urlencoded"
            >
                <div className="add-to-fav-wrapper">
                    <div
                        className="ops-icon"
                        on={
                            'tap:AMP.setState({ favState: { newState: false }}),toggle-favorite-form.submit'
                        }
                        role="add-to-fav"
                        tabIndex="0"
                        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"
                        data-amp-bind-hidden="favState.newState == true"
                    >
                        <NoneFavorite />
                    </div>
                </div>
                <input
                    hidden
                    name="newState"
                    data-amp-bind-value="favState.newState"
                />
                <input
                    hidden
                    name="userId"
                    data-amp-bind-value="favState.userId"
                />
            </form>

这就是状态：

        <amp-state id="favState">
            <script
                type="application/json"
                dangerouslySetInnerHTML={markup(
                    JSON.stringify({
                        userId: user?.id,
                        newState: !!isAddedTofav,
                    })
                )}
            />
        </amp-state>

从正确更新收藏夹的意义上说，该代码运行良好，但它只是在页面加载时不断显示两个按钮。

【问题讨论】：

标签： next.js amp-html

【解决方案1】：

我偶然发现了 amp 网站上关于如何切换收藏夹的官方文档。我尝试通过使用动态状态来调整我的解决方案，但在隐藏 amp 的情况下并没有这样做。

所以最终我决定像他们一样重构代码，并且成功了。

希望以后有人能回答我的问题。

这是链接：

https://amp.dev/documentation/examples/interactivity-dynamic-content/favorite_button/?format=websites

【讨论】：