React中能否传值给className函数，并在useEffect中复用该值执行？

完全可以实现你的需求，核心是通过共享变量保证两处调用run函数时使用相同值，同时利用React的执行时机特性满足不同阶段的调用要求。

修正后的代码示例 #

import { useEffect } from 'react';

const run = (val: any) => val;

const ExampleComponent = () => {
  // 定义共享变量，确保两处调用使用相同值
  const sharedVal = 'go';

  // 空依赖useEffect：组件挂载完成后执行
  useEffect(() => {
    const val = run(sharedVal);
    console.log(val); // 输出 'go'
  }, []);

  // 组件函数执行时（挂载前），JSX解析阶段会调用run(sharedVal)生成className
  return (
    <>
      <button className={run(sharedVal)}>
        run
      </button>
    </>
  );
};

export default ExampleComponent;

关键说明 #

• 挂载前的执行时机：组件函数执行时会解析JSX，className={run(sharedVal)}会立即调用run函数，此时React还未完成DOM挂载，完全符合你“组件函数执行后、挂载前”的要求，返回的字符串会作为按钮的类名。
• 挂载后的执行时机：空依赖的useEffect会在组件所有DOM元素挂载完成后触发一次，这里调用run(sharedVal)就能实现挂载后的二次执行。
• 共享变量的作用：把要传入的值提取为组件内的常量，避免硬编码重复，确保两处调用的变量完全一致。

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