在React函数组件中导出deleteCookie函数实现跨组件登出调用

问题原因 #

你无法直接导出deleteCookie的核心原因是：该函数定义在Logout、View组件的内部作用域中，不属于模块顶层成员，无法直接通过export导出给外部使用，且该函数依赖组件内部传入的setScreen方法来切换登录态，单独导出也无法正常执行状态变更逻辑。

解决方案 #

方案1：抽离为公共工具函数（最简实现） #

将deleteCookie抽离到模块顶层，把依赖的setScreen作为入参传入，即可对外导出复用：

1. 在当前文件的导入语句下方新增顶层导出函数：

import axios from 'axios';
// 新增：抽离公共登出方法
export const deleteCookie = async (setScreen) => {
  try {
    await axios.get('/clear-cookie');
    setScreen?.('auth');
  } catch (e) {
    console.log(e);
  }
};

2. 移除Logout、View组件内部重复定义的deleteCookie函数，直接调用公共方法即可：

export function Logout (props) {
  const { setScreen } = props;
  return (
    <div>
       {/* 注意React中DOM属性要用className代替class，避免控制台警告 */}
       <button className="btn btn-secondary" onClick={() => deleteCookie(setScreen)} style={{marginTop:'10px'}}>Logout</button>         
    </div>
  );
}

export function View (props) {
  const { setScreen } = props;
  const [data, setData] = useState();
  // ... 保留原有getData逻辑
  return (
    <div className="App">
      <p>{data}</p>
      <Login />
      {/* 要在View里加登出按钮直接调用即可 */}
      {/* <button className="btn btn-secondary" onClick={() => deleteCookie(setScreen)} style={{marginTop:'10px'}}>Logout</button> */ } 
    </div>
  );
}

3. 其他组件使用时直接导入该方法，传入对应上下文的setScreen参数即可执行登出逻辑：

// 在其他组件中导入使用
import { deleteCookie } from './当前文件的路径';

// 调用示例
const OtherComponent = () => {
  // 这里的setScreen可以是对应组件的状态，或者从上下文/状态管理中拿到的切换登录态的方法
  const setScreen = useSetScreen();
  return <button onClick={() => deleteCookie(setScreen)}>其他位置的登出按钮</button>
}

方案2：全局共享登出方法（适合多组件复用场景） #

如果你的项目有多处需要用到登出能力，不想层层传递setScreen参数，可以配合React Context做全局状态共享，把登出方法放在Context中，所有子组件都可以直接调用，不需要额外导入传参。

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