src/element/res/resElementTest.tsx

   1 import React, {useState,useEffect} from "react";
   2 import {getWindowSize} from "../../components/disSize";
   3
   4 export default function ResElementTest ({children}:any) {
   5     const {width} = getWindowSize();
   6     const [debugColor]= useState({backcolor: ""})
   7     const [debugDisp]= useState({disp: ""});
   8     const [returnMode]= useState({p: ""});
   9     useEffect(() => {
  10         if (width >= 570) {
  11             // when under width of 570px
  12             debugColor.backcolor = "red";
  13             debugDisp.disp = "flex";
  14             returnMode.p = "PC";
  15         } else {
  16             // when over width of 570px
  17             debugColor.backcolor = "blue";
  18             debugDisp.disp = "block";
  19             returnMode.p = "Mobile"
  20         }
  21     }, [width]);
  22     return (
  23         <div style={{
  24             backgroundColor: debugColor.backcolor,
  25             display: debugDisp.disp,
  26         }}>
  27             <h1>{returnMode.p}</h1>
  28             <div style={{backgroundColor: "yellow",color: "black"}}>
  29                 aiaia
  30             </div>
  31             <div style={{backgroundColor: "yellow",color: "black"}}>
  32                 aiaia
  33             </div>
  34             <div style={{backgroundColor: "yellow",color: "black"}}>
  35                 aiaia
  36             </div>
  37         </div>
  38     )
  39 }
  40
  41 // Properties<string | number, string&{}> {