如果元素在 React JS 中映射，如何获取元素的 rect.top 和 rect.left

Question

当鼠标移动到一些卡片上时，我试图对它们产生光泽效果。

我需要的是移动光泽效果的基础上的鼠标位置。我遇到的问题是我无法得到卡片的顶部和左侧因为它们是这样映射的

          <div ref={cardsContainer} className={styles.cardsContainer}>
            {data.map((card, index) => (
              <div
                key={index}
                ref={cards}
                className={`${styles.card} cards`}
                onMouseMove={(index, e) => handleMouseMove(index, e)}
              >
                {card.title}
                <div
                  className={styles.cardGlow}
                  style={{ top: glowXPos, left: glowYPos }}
                ></div>
              </div>
            ))}
          </div>

我已经尝试使用索引来获得元素的矩形，但它不起作用。它说GlowingCardsGrid.jsx:21 Uncaught TypeError: index.getBoundingClientReact is not a function。

  const handleMouseMove = (index, e) => {
    const rect = index.getBoundingClientReact();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    setGlowXPos(x);
    setGlowYPos(y);
  };

是否有一种方法，我可以得到每个元素的顶部和左侧取决于我的悬停在哪个?

Answer 1

如果您只是想在元素悬停时更改一些样式或类，那么更好的方法是创建一个可重用的组件，该组件可以管理自己的状态。

使用onMouseOver将状态变量设置为true, onMouseOut将其设置为false，当元素悬停时，您可以做任何您想做的事情(例如，运行动画，添加一些样式或更改类)。

function App() {
    return (
        <div>
            {data.map((card, index) => (
                <HoverCard key={index}>
                    <h3>{card.title}</h3>
                </HoverCard>
            ))}
        </div>
    );
}
function HoverCard({ children }) {
    const [isHover, setIsHover] = React.useState(false);
    const baseElementStyles = {
        backgroundColor: 'coral',
        color: 'white',
        cursor: 'pointer',
        display: 'grid',
        height: '10rem',
        margin: '1rem',
        overflow: 'hidden',
        placeContent: 'center',
        position: 'relative',
    };
    const hoverElementStyles = {
        backgroundColor: 'deeppink',
        position: 'absolute',
        inset: '0',
        transform: 'translateX(-100%)',
        transition: 'transform .2s ease-in-out',
    };
    return (
        <div
            onMouseOver={() => setIsHover(true)}
            onMouseOut={() => setIsHover(false)}
            style={baseElementStyles}
        >
            <div
                style={
                    !isHover
                        ? hoverElementStyles
                        : { ...hoverElementStyles, transform: 'translateX(0)' }
                }
            ></div>
            <div style={{ position: 'relative' }}>{children}</div>
        </div>
    );
}
var data = [
    {
        title: 'Title 1',
    },
    {
        title: 'Title 2',
    },
    {
        title: 'Title 3',
    },
];

ReactDOM.createRoot(document.getElementById("root")).render(<App />)

<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>