如何向CSS样式文件传递值/Props？实现点击更新Div定位

你不用尝试把动态位置传给CSS文件——因为CSS是静态资源，编译后无法动态修改。直接在React组件里通过动态style属性或者CSS变量来设置top和left就行，以下是两种实用方案：

方案1：直接使用内联style #

这种方法最直接，把动态计算的top/left通过style属性绑定到div上，CSS类保留其他静态样式：

/* CSS文件保留静态样式，可去掉固定top/left或留作默认值 */
.dataCardAbsolute {
  position: absolute;
  overflow: auto;
  top: 100px;
  left: 300px;
}

import React from 'react';
import styles from './你的样式文件路径.module.css';

function YourComponent() {
  // 初始化位置，对应CSS默认值
  const [position, setPosition] = React.useState([100, 300]);

  React.useEffect(() => {
    const handleBodyClick = (event) => {
      setPosition([event.pageX, event.pageY]);
    };
    
    document.body.addEventListener('click', handleBodyClick);
    
    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      document.body.removeEventListener('click', handleBodyClick);
    };
  }, []);

  return (
    <div
      className={styles.dataCardAbsolute}
      // 动态绑定top和left
      style={{
        top: `${position[0]}px`,
        left: `${position[1]}px`
      }}
    >
      {/* 卡片内容 */}
    </div>
  );
}

export default YourComponent;

方案2：使用CSS变量 #

如果需要在多个CSS规则里复用位置值，可以用CSS变量，React负责更新变量值：

/* CSS文件用变量替代固定值，第二个参数是默认值 */
.dataCardAbsolute {
  position: absolute;
  top: var(--card-top, 100px);
  left: var(--card-left, 300px);
  overflow: auto;
}

import React from 'react';
import styles from './你的样式文件路径.module.css';

function YourComponent() {
  const [position, setPosition] = React.useState([100, 300]);

  React.useEffect(() => {
    const handleBodyClick = (event) => {
      setPosition([event.pageX, event.pageY]);
    };
    
    document.body.addEventListener('click', handleBodyClick);
    return () => {
      document.body.removeEventListener('click', handleBodyClick);
    };
  }, []);

  return (
    <div
      className={styles.dataCardAbsolute}
      // 通过style设置CSS变量
      style={{
        '--card-top': `${position[0]}px`,
        '--card-left': `${position[1]}px`
      }}
    >
      {/* 卡片内容 */}
    </div>
  );
}

export default YourComponent;

注意点 #

• 必须在useEffect中添加清理函数移除监听，防止组件卸载后内存泄漏。
• 若需相对于视口的位置，将event.pageX/pageY替换为event.clientX/clientY即可。

内容的提问来源于stack exchange，提问作者NightTom