React-依视窗大小改变DOM

在class component上
一开始必须得在construtor上导入state判断视窗大小
是否大於或等於节点
此处是在於当视窗onload时判断大小进而侦测state

this.state={
  size: document.body.offsetWidth<769?true:false
}

之後为了缩放视窗时
能够侦测视窗状态，缩放大小时改变state
必须在componentDidMount做一个resize动作来重新侦测

window.onresize=()=>{
   this.setState({
      size:document.body.offsetWidth<769?true:false
   });
}

当然在render内必须解构附值size
并给予布林值条件

const {size}=this.state;
const Size=size?'':<br/>;

此处即为dom缩放视窗後所要改变的目标物
即视窗大於769px後会加上
小於769时br标签会拿掉

在改为function component後
首先一样使用useState设定初始state:size
并给予改变size的函式setSize

const [size,setChbr]=useState(
   document.body.offsetWidth<769?true:false
);

接着改写视窗改变时的resize状态

window.onresize=()=>{
    setSsiez(
        document.body.offsetWidth<769?true:false
    );
};

此处因在function component的关系
不需要使用constructor与componentDidMount
最後给予判断式

const Size=size?'':<br/>;