React中如何跨文件导入setMathEditorVisible状态更新函数？

核心问题说明 #

components/Editor.js里的setMathEditorVisible是组件函数内部的局部状态Setter，不属于模块导出成员，无法直接通过import导入到utils目录的文件中，这就是你看到no-undef错误的原因。

可行实现方案 #

1. 修改utils目录下的函数，接收Setter作为参数 #

utils/Form.js

// 保留原有导入
export const handleSaveFormula = (latex, setMathEditorVisible) => {
  // 原有业务代码
  setMathEditorVisible(false);   
};

utils/Editor.js

// 保留原有导出
export const editExpression = (setMathEditorVisible) => {
  // 原有业务代码
  setMathEditorVisible(true);
};

2. 在components/Editor.js中调用时传入Setter #

import { handleSaveFormula } from '../utils/Form';
import { editExpression } from '../utils/Editor';

const Editor = () => {
  const [mathEditorVisible, setMathEditorVisible] = useState(false);

  // 调用编辑函数时传入Setter
  const handleEditTrigger = () => {
    editExpression(setMathEditorVisible);
  };

  // 调用保存函数时传入Setter
  const handleSaveTrigger = (latex) => {
    handleSaveFormula(latex, setMathEditorVisible);
  };

  // 其他组件代码
}

补充说明 #

如果你的项目有多个组件需要共享这个状态，也可以用React Context封装状态和Setter，让utils函数通过Context获取Setter。但针对当前场景，参数传递是最轻量直接的解决方式。

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