我有一个可以听的钩子window.resize
事件。
我只想听并更新window.innerWidth
变化。我希望忽略更改window.innerHeight
因为打开软键盘时会触发此操作。
问题是 mediaSize 存储在我的 Redux Store 中,导致应用程序在软键盘打开时重新渲染。
我的代码同时触发window.innerWidth
and window.innerHeight
改变,我怎样才能改变这种行为?
My hook
import { useState, useEffect } from 'react';
// Hook
export const useWindowSize = () => {
const isClient = typeof window === 'object'; //Object represents browser window
function getSize() {
return {
width: isClient ? window.innerWidth : undefined
}
}
const [windowSize, setWindowSize] = useState(getSize)
useEffect(() => {
if (!isClient) { return false } //Exit if not user/browser
function handleResize() {
setWindowSize(getSize())
}
window.addEventListener('resize', handleResize) // <-- I am only interested in window.innerWidth !
return () => window.removeEventListener('resize', handleResize)
}, []) // Empty array ensures that effect is only run on mount and unmount
return windowSize
}
在我的实施AppRouter.js
const AppRouter = ({ isNavOpen, mediaSize, startSetMediaSize, language, ...rest }) => {
//** Start mediaQuery */
const mediaBreakpoints = {
smallStr: styles['breakpoint-small-value'],
mediumStr: styles['breakpoint-medium-value'],
largeStr: styles['breakpoint-large-value'],
smallInt: new Number(styles['breakpoint-small-value']).valueOf(),
mediumInt: new Number(styles['breakpoint-medium-value']).valueOf(),
largeInt: new Number(styles['breakpoint-large-value']).valueOf(),
small: styles['breakpoint-small'],
medium: styles['breakpoint-medium'],
large: styles['breakpoint-large']
}
//Calculate media size
const screenWidth = useWindowSize().width
...
useEffect(() => {
if (screenWidth > mediaBreakpoints.largeInt) {
if (mediaSize !== MEDIA_LARGE) { startSetMediaSize(MEDIA_LARGE) }
} else if (screenWidth > mediaBreakpoints.mediumInt) {
if (mediaSize !== MEDIA_MEDIUM) { startSetMediaSize(MEDIA_MEDIUM) }
} else if (screenWidth > mediaBreakpoints.smallInt) {
if (mediaSize !== MEDIA_SMALL) { startSetMediaSize(MEDIA_SMALL) }
} else {
//Tiny and small are treated equally
if (mediaSize !== MEDIA_SMALL) { startSetMediaSize(MEDIA_SMALL) }
}
}, [screenWidth]) // Only run if screen width changes
}
const mapStateToProps = (state) => ({
isNavOpen : state.ui.isOpen,
mediaSize: state.ui.mediaSize, //small / medium / large
language: state.usersettings.language //se||en
})
const mapDispatchToProps = (dispatch) => ({
startSetNavigationState: (isOpen) => dispatch(setNavigationState(isOpen)),
startSetMediaSize: (mediaSize) => dispatch(setMediaSize(mediaSize))
})
//export default AppRouter
export default connect(mapStateToProps, mapDispatchToProps)(AppRouter)
我的挂载点AppRouter
const jsx = (
<React.StrictMode>
<Provider store={store}>
<AppRouter />
</Provider>
</React.StrictMode>
)
亲切的问候/K