JS從函數返回一個數組和一個對象
在我的反應應用程序中,我有一個處理屏幕大小調整的鉤子。該函數返回一個寬高數組。
function useDimensions() { const [size, setSize] = useState([window.innerWidth, window.innerHeight]); const [isSmScreen, setIsSmScreen] = useState(false); const [isLgScreen, setIsLgScreen] = useState(false); function handleResize() { const windowWidth = window.innerWidth; if (windowWidth < BREAKPOINTS.sm) { setIsXsScreen(true); } else if (windowWidth < BREAKPOINTS.lg) { setIsSmScreen(true); } setSize([window.innerWidth, window.innerHeight]); } useLayoutEffect(() => { // So it doesnt get called every pixel changed const debouncedResize = debounce(handleResize, 100); window.addEventListener('resize', debouncedResize); return () => window.removeEventListener('resize', handleResize); }, []); return size; } export default useDimensions;
我在我的反應應用程序中調用鉤子,例如 const [width] = useDimensions()
.我也想調用像 const {isSmScreen} = useDimensions()
這樣的鉤子 .這可能嗎?如何從 useDimensions 鉤子中導出它
回答
當然,由於數組是一個對象,你可以定義額外的屬性。
例如:
size.isSmScreen = isSmScreen; return size;
或者:
return Object.assign(size, {isSmScreen});
這是否是一個好主意,雖然是有爭議的。如果我使用函數來獲取數組,我不希望該數組具有其他自定義屬性。
將數組數據作為返回對象的單個屬性返回會更自然,例如:
return { size, isSmScreen }
那麼調用者當然必須意識到這一點。只獲取寬度,它可以這樣做:
let { size: [width] } = useDimensions();
下一篇
RxJS 可觀察到函數鏈的結果