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/>;