javascript - 尽管反应状态发生了变化,但 CSS 样式不会改变
问题描述
我创建了 const isTransitionEnabled 和 isMenuToggled 状态。当按下按钮时,isMenuToggled 设置为 true,并且样式发生变化。而 isTransitionEnabled 默认为 false,并且在设置 isMenuToggled 之前设置为 true,并且一旦完成 isMenuToggled 操作,isTransitionEnabled 再次设置为 false。目的是防止由于窗口大小或方向变化等原因重新渲染站点时发生转换。
我尝试编写一些异步 javascript 代码。但是,尽管状态发生了变化,但对样式没有影响,并且无论 isTransitionEnabled 是什么,转换都被禁用。为什么?
下面是一些代码:
import React , { useState, useEffect } from 'react'
import { useMediaQuery } from 'react-responsive'
import './App.css'
import Header from './Header/Header'
export default function Home() {
const isMobile = useMediaQuery({
query: '(max-device-width: 1024px)'
})
const [isMenuToggled, SetIsMenuToggled] = useState(false)
const [isTransitionEnabled, SetTransitionEnabled] = useState(false)
const isMenuToggledReporter = async ()=> {
const ToggleMenu = (TransitionState)=>{
return new Promise((resolve, reject)=>{
//console.log(TransitionState)
SetIsMenuToggled(!isMenuToggled)
resolve(TransitionState)
})
}
const ChangeTransitionState = (TransitionState)=>{
return new Promise((resolve, reject)=>{
SetTransitionEnabled(!TransitionState)
//console.log(TransitionState)
resolve(!TransitionState)
})
}
//ChangeTransitionState(isTransitionEnabled)
//.then((TransitionState)=>{
//return ToggleMenu(TransitionState)})
//.then((TransitionState)=>{
//ChangeTransitionState(TransitionState)
//})
const promise1 = await ChangeTransitionState(false)
const promise2 = await ToggleMenu(promise1)
const promise3 = await ChangeTransitionState(promise2)
console.log(`promise 1 is ${promise1}`)
console.log(`promise 2 is ${promise2}`)
console.log(`promise 3 is ${promise3}`)
//SetIsMenuToggled(!isMenuToggled)
//SetTransitionEnabled(true)
}
//Use observer pattern for main div
//If toggle, the menu is open, disable transition
return (
<div style={{
}}>
<div style={{
position: 'absolute',
right: isMenuToggled?'40vw':'0',
height: '100vh',
width: '100vw',
display: 'grid',
gridTemplateRows: 'repeat(20, 5vmax)',
transition: isTransitionEnabled?'right 1s':'none'
}}>
<Header isMobile={isMobile} isMenuToggledReporter={isMenuToggledReporter} isTransitionEnabled={isTransitionEnabled}/>
</div>
<div style={isMobile?{
position: 'absolute',
background: '#008b8b',
left: isMenuToggled?'60vw':'100vw',
height: '100vmax',
width: '40vw',
transition: isTransitionEnabled?'left 1s':'none',
}:{
display: 'none',
}}>
</div>
</div>
)
}
解决方案
推荐阅读
- json - JSON 数据未显示在 Ionic HTML 文件中
- lua - Tarantool 预读限制已达到警告
- android - 我在通过 cordova build 构建 android 时遇到问题
- node.js - 无法访问对象内部的数据
- c# - 更新 DataGrid 中的行后 SaveChanges() 引发异常 [C#][WPF]
- tensorflow-lite - 如何通过谷歌对 USB Accelerator 珊瑚 beta 进行基准测试?
- r - 用 NA 替换一行数据框中的第一个重复数据
- rpm - 将 rpmbuild 目录更改为 /var/lib/jenkins/rpmbuild/
- git - 将文件添加回主分支,该分支在还原中被删除
- python - 为什么我的脚本无法解析子目录中的 xml 文件?