Reactjs 反应类型脚本：鼠标移动时重新渲染div

我正在尝试制作一个图像放大镜，当我单击图像时，我正在将

zoomOn

从true切换到false。当我将鼠标移到图像上时，我正在将x，y位置保存到状态，我正在渲染放大镜并使用x和y定位背景图像。但是由于某种原因，在我移动光标时，左上方的值没有更新

import React, { useState } from 'react';

const Magnify: React.FC = () => {

  const [state, setState] = useState({
    mouseOver: false,
    zoomId: '',
    zoomOn: false,
    zoomPositionX: 0,
    zoomPositionY: 0,
  });

  const {
    zoomId,
    zoomOn,
    mouseOver,
    zoomPositionX,
    zoomPositionY,
  } = state;


  const toggleZoom = () => {
    setState((prev) => ({
      ...prev,
      zoomOn: !zoomOn,
    }));
  };

  const mouseEnter = () => {
    setState((prev) => ({
      ...prev,
      mouseOver: true,
    }));
  };

  const mouseLeave = () => {
    setState((prev) => ({
      ...prev,
      mouseOver: false,
    }));
  };

  const mouseMove = (event: React.MouseEvent) => {
    event.persist();
    if (zoomOn) {
      setState((prev) => ({
        ...prev,
        zoomPositionX: event.nativeEvent.offsetX,
        zoomPositionY: event.nativeEvent.offsetY,
      }));
      renderMagnifier(); // <---- This isnt right!??
    }
  };
  const renderMagnifier = () => {
    return <div className='bus--magnifier' style={magnifierStyle()}></div>;
  };
  const magnifierStyle = () => {
    return {
      backgroundImage: `url('bigtestImage.jpg')`,
      backgroundPosition: `${zoomPositionX}px ${zoomPositionY}px`,
      backgroundRepeat: 'no-repeat',
      backgroundSize: '1000px 1000px',
      left: `${zoomPositionY}`,
      top: `${zoomPositionX}`,
    };
  };

  return (
    <div className='magnify'>
      <img
        src='bigtestImage.jpg'
        width={720}
        height={720}
        onClick={toggleZoom}
        onMouseEnter={mouseEnter}
        onMouseLeave={mouseLeave}
        onMouseMove={mouseMove}
        className={
          zoomOn && mouseOver
            ? 'magnify--image magnify--over-on'
            : 'magnify--image magnify--over-off'
        }
      />
      {renderMagnifier()}
    </div>
  );
};

export { Magnify };

---

尝试使用React Hooks中的

useMemo

在状态更改后更新放大镜样式

    import { useMemo } from 'react';
    ...
    const magnifierStyle = useMemo(() => {
         return {
          backgroundImage: `url('bigtestImage.jpg')`,
          backgroundPosition: `${state.zoomPositionX}px ${state.zoomPositionY}px`,
          backgroundRepeat: 'no-repeat',
          backgroundSize: '1000px 1000px',
          left: `${state.zoomPositionY}`,
          top: `${state.zoomPositionX}`,
         };
    }, [[state.zoomPositionX, state.zoomPositionY]]);
    ...
    const renderMagnifier = () => {
       return <div className='bus--magnifier' style={magnifierStyle}></div>;
    };

从'react'导入{usemo}；
...
常量放大镜样式=使用备注（（）=>{
返回{
背景图像：`url（'bigtestImage.jpg'）`，
背景位置：`${state.zoomPositionX}px${state.zoomPositionY}px`，
背景重复：“不重复”，
背景尺寸：“1000px 1000px”，
左：`${state.zoomPositionY}`，
顶部：`${state.zoomPositionX}`，
};
}，[[state.zoomPositionX，state.zoomPositionY]]；
...
常量renderMagnifier=（）=>{
返回；
};

renderMagnifier只是一个功能组件，所以将其用作React.Component，并将zoomPositionX和zoomPositionY传递给这些组件。“放大”中的“更改状态”更改将导致“放大”及其子组件的重新启用

换钱

const Magnifier: React.FC = ({ zoomPositionX, zoomPositionY }) => {

  const magnifierStyle =  {
      backgroundImage: `url('bigtestImage.jpg')`,
      backgroundPosition: `${zoomPositionX}px ${zoomPositionY}px`,
      backgroundRepeat: 'no-repeat',
      backgroundSize: '1000px 1000px',
      left: `${zoomPositionY}`,
      top: `${zoomPositionX}`,
  };

  return <div className="bus--magnifier" style={magnifierStyle}></div>;
}

const Magnify: React.FC = () => {

  const [state, setState] = useState({
    mouseOver: false,
    zoomId: '',
    zoomOn: false,
    zoomPositionX: 0,
    zoomPositionY: 0,
  });

  const {
    zoomId,
    zoomOn,
    mouseOver,
    zoomPositionX,
    zoomPositionY,
  } = state;


  const toggleZoom = () => {
    setState((prev) => ({
      ...prev,
      zoomOn: !zoomOn,
    }));
  };

  const mouseEnter = () => {
    setState((prev) => ({
      ...prev,
      mouseOver: true,
    }));
  };

  const mouseLeave = () => {
    setState((prev) => ({
      ...prev,
      mouseOver: false,
    }));
  };

  const mouseMove = (event: React.MouseEvent) => {
    event.persist();
    if (zoomOn) {
      setState((prev) => ({
        ...prev,
        zoomPositionX: event.nativeEvent.offsetX,
        zoomPositionY: event.nativeEvent.offsetY,
      }));
      renderMagnifier(); // <---- This isnt right!??
    }
  };

  return (
    <div className='magnify'>
      <img
        src='bigtestImage.jpg'
        width={720}
        height={720}
        onClick={toggleZoom}
        onMouseEnter={mouseEnter}
        onMouseLeave={mouseLeave}
        onMouseMove={mouseMove}
        className={
          zoomOn && mouseOver
            ? 'magnify--image magnify--over-on'
            : 'magnify--image magnify--over-off'
        }
      />
      <Magnifier zoomPositionX={zoomPositionX} zoomPositionY={zoomPositionY} />
    </div>
  );
}

const放大镜：React.FC=（{zoomPositionX，zoomPositionY}）=>{
常量放大镜样式={
背景图像：`url（'bigtestImage.jpg'）`，
背景位置：`${zoomPositionX}px${zoomPositionY}px`，
背景重复：“不重复”，
背景尺寸：“1000px 1000px”，
左：`${zoomPositionY}`，
顶部：`${zoomPositionX}`，
};
返回；
}
常量放大：React.FC=（）=>{
常量[状态，设置状态]=使用状态({
老鼠：错，
zoomId:“”，
错，
zoomPositionX:0，
zoomPositionY:0，
});
常数{
zoomId，
zoomOn，
鼠标盖，
zoomPositionX，
动物性，
}=国家；
常量切换缩放=（）=>{
设置状态（（上一个）=>({
…上一页，
zoomOn:！zoomOn，
}));
};
常数mouseEnter=（）=>{
设置状态（（上一个）=>({
…上一页，
老鼠：是的，
}));
};
常数mouseLeave=（）=>{
设置状态（（上一个）=>({
…上一页，
老鼠：错，
}));
};
常量mouseMove=（事件：React.MouseEvent）=>{
event.persist（）；
如果（zoomOn）{
设置状态（（上一个）=>({
…上一页，
zoomPositionX:event.nativeEvent.offsetX，
zoomPositionY:event.nativeEvent.offsetY，
}));
renderMagnifier（）//
const Magnifier: React.FC = ({ zoomPositionX, zoomPositionY }) => {

  const magnifierStyle =  {
      backgroundImage: `url('bigtestImage.jpg')`,
      backgroundPosition: `${zoomPositionX}px ${zoomPositionY}px`,
      backgroundRepeat: 'no-repeat',
      backgroundSize: '1000px 1000px',
      left: `${zoomPositionY}`,
      top: `${zoomPositionX}`,
  };

  return <div className="bus--magnifier" style={magnifierStyle}></div>;
}

const Magnify: React.FC = () => {

  const [state, setState] = useState({
    mouseOver: false,
    zoomId: '',
    zoomOn: false,
    zoomPositionX: 0,
    zoomPositionY: 0,
  });

  const {
    zoomId,
    zoomOn,
    mouseOver,
    zoomPositionX,
    zoomPositionY,
  } = state;


  const toggleZoom = () => {
    setState((prev) => ({
      ...prev,
      zoomOn: !zoomOn,
    }));
  };

  const mouseEnter = () => {
    setState((prev) => ({
      ...prev,
      mouseOver: true,
    }));
  };

  const mouseLeave = () => {
    setState((prev) => ({
      ...prev,
      mouseOver: false,
    }));
  };

  const mouseMove = (event: React.MouseEvent) => {
    event.persist();
    if (zoomOn) {
      setState((prev) => ({
        ...prev,
        zoomPositionX: event.nativeEvent.offsetX,
        zoomPositionY: event.nativeEvent.offsetY,
      }));
      renderMagnifier(); // <---- This isnt right!??
    }
  };

  return (
    <div className='magnify'>
      <img
        src='bigtestImage.jpg'
        width={720}
        height={720}
        onClick={toggleZoom}
        onMouseEnter={mouseEnter}
        onMouseLeave={mouseLeave}
        onMouseMove={mouseMove}
        className={
          zoomOn && mouseOver
            ? 'magnify--image magnify--over-on'
            : 'magnify--image magnify--over-off'
        }
      />
      <Magnifier zoomPositionX={zoomPositionX} zoomPositionY={zoomPositionY} />
    </div>
  );
}