时间戳

首页 > 解决方案 > amp hidden 在初始渲染时不起作用

next.js - amp hidden 在初始渲染时不起作用

问题描述

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

这是我现在的代码：

            <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.jsamp-html

解决方案

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

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

希望将来有人可以回答我的问题。

这是链接：

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

推荐阅读