响应TypeScript:鼠标移动时重新渲染div

Question

我试着做一个图像放大镜，当我点击图片时，当我将鼠标移到图像上时，我要将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 };

和scss

.magnify {
    max-width: $page-max-width;
    margin: 12px auto;
    position: relative;
    &--image {
        border-radius: 5px;
        box-shadow: $depth-1;
        cursor: zoom-in;
    }
    &--over-on {
        cursor: none;
    }
    &--over-off {
        cursor: zoom-in;
    }
    &--magnifier {
        position: absolute;
        border: 2px solid white;
        border-radius: 5px;
        cursor: none;
        width: 250px;
        height: 250px;
        pointer-events: none;  
      }
}

Answer 1

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>
  );
}

Answer 2

尝试在状态更改后使用React中的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>;
    };