Как я могу использоватьэффект при изменении ширины экрана? ⇐ Html

[Anonymous]

Я использую React, у меня есть холст, который имеет различный размер и форму в зависимости от размера экрана. Если я хочу нарисовать что -то в холсте, мне нужно установить размеры для каждого отдельного размера экрана. < /P>

Код: Выделить всё

const [screenWidth, setScreenWidth] = useState(window.screen.width);

const screenFun = () => {
setScreenWidth(window.screen.width)
}

const playerFun = (screenWidth) => {
if(screenWidth >= 2100){
console.log('width bigger than 2100')
setPlayerWidth(18);
setPlayerHeight(12);
};
if(screenWidth >= 1850 && window.screen.width < 2100){
console.log('width bigger than 1850')
setPlayerWidth(30);
setPlayerHeight(20);
};
}

const Canvas = props => {
const canvasRef = useRef(null);

useEffect(() =>{

const canvas = canvasRef.current
const context = canvas.getContext('2d')

setCanvasWidth((canvas.width*(0.5))-10);
setCanvasHeight((canvas.height*(0.5))-15);
console.log('width: '+canvas.width+' height is: '+canvas.height)

context.fillStyle = '#00f4cc'
context.fillRect(canvasWidth, canvasHeight, playerWidth, playerHeight)

},[])

return 

}

useEffect(() =>{
screenFun();
})

useEffect(() =>{
playerFun();
},[screenWidth])

То, что я пытался сделать, это обновить состояние переменной Screenfun каждый раз, когда экран изменяется, имея использованиеэфект (() => {screenfun ();})

Подробнее здесь: https://stackoverflow.com/questions/739 ... dth-change