amp hidden 不适用于初始渲染
amp hidden does not work on initial render
我有两个按钮,根据状态值显示两个不同的图标。当组件首次加载时,我希望其中一个按钮可见。
这是我现在的代码:
<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>
代码在正确更新收藏夹的意义上工作正常,但它只是在页面加载时继续显示两个按钮。
我偶然发现了 amp 网站上关于如何切换收藏夹的官方文档。我试图通过使用动态状态来调整我的解决方案,但是没有隐藏放大器。
所以最终我决定像他们那样重构代码,并且成功了。
希望以后有人能回答我的问题。
这是link:
我有两个按钮,根据状态值显示两个不同的图标。当组件首次加载时,我希望其中一个按钮可见。
这是我现在的代码:
<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>
代码在正确更新收藏夹的意义上工作正常,但它只是在页面加载时继续显示两个按钮。
我偶然发现了 amp 网站上关于如何切换收藏夹的官方文档。我试图通过使用动态状态来调整我的解决方案,但是没有隐藏放大器。
所以最终我决定像他们那样重构代码,并且成功了。
希望以后有人能回答我的问题。
这是link: