React Hooks中如何在非关联组件间调用其他组件内的函数？

首先明确：你不能直接导入Test组件内部的TestFnc函数来更新它的状态。因为Test组件每次渲染时，内部的TestFnc都会重新创建，且该函数依赖的setState是绑定到当前Test组件实例的状态上的，跨组件直接调用根本找不到对应的状态实例。

下面是几种可行的解决方案：

1. 状态提升（React原生推荐方案） #

把状态和更新函数抽离到两个组件共同的父组件中，再通过props传递给子组件：

// 父组件
import Test from './Test';
import Component from './Component';
import { useState } from 'react';

export default function Parent() {
  const [state, setState] = useState(0);

  const TestFnc = () => {
    setState(20);
  };

  return (
    <>
      <Test state={state} />
      <Component onClick={TestFnc} />
    </>
  );
}

// Test组件
export default function Test({ state }) {
  return <p>{state}</p>;
}

// Component组件
export default function Component({ onClick }) {
  return <p onClick={onClick}>click me</p>;
}

2. 使用React Context（适配深层组件层级） #

如果组件嵌套层级较深，状态提升成本高，可以用Context共享状态和更新函数：

// 创建Context文件
import { createContext, useContext, useState } from 'react';

const StateContext = createContext();

export function StateProvider({ children }) {
  const [state, setState] = useState(0);

  const TestFnc = () => {
    setState(20);
  };

  return (
    <StateContext.Provider value={{ state, TestFnc }}>
      {children}
    </StateContext.Provider>
  );
}

export function useStateContext() {
  return useContext(StateContext);
}

// Test组件
import { useStateContext } from './StateContext';

export default function Test() {
  const { state } = useStateContext();
  return <p>{state}</p>;
}

// Component组件
import { useStateContext } from './StateContext';

export default function Component() {
  const { TestFnc } = useStateContext();
  return <p onClick={TestFnc}>click me</p>;
}

// 根组件包裹Provider
import { StateProvider } from './StateContext';
import Test from './Test';
import Component from './Component';

export default function App() {
  return (
    <StateProvider>
      <Test />
      <Component />
    </StateProvider>
  );
}

3. 使用状态管理库（适配复杂应用状态） #

如果应用状态逻辑复杂，可选用专门的状态管理库，以轻量的Zustand为例：

// 状态Store
import { create } from 'zustand';

const useStore = create((set) => ({
  state: 0,
  TestFnc: () => set({ state: 20 }),
}));

// Test组件
export default function Test() {
  const state = useStore((store) => store.state);
  return <p>{state}</p>;
}

// Component组件
export default function Component() {
  const TestFnc = useStore((store) => store.TestFnc);
  return <p onClick={TestFnc}>click me</p>;
}

4. 不推荐方案：挂载到window对象 #

Hooks组件也能实现挂载window的方式，但会污染全局环境，且组件卸载后易引发内存泄漏或错误：

// Test组件
import { useState, useEffect } from 'react';

export default function Test() {
  const [state, setState] = useState(0);

  const TestFnc = () => {
    setState(20);
  };

  useEffect(() => {
    window.TestFnc = TestFnc;
    // 组件卸载时清理全局变量
    return () => delete window.TestFnc;
  }, [TestFnc]); // 需将TestFnc加入依赖，确保更新后window上的函数是最新的

  return <p>{state}</p>;
}

// Component组件
export default function Component() {
  return <p onClick={() => window.TestFnc?.()}>click me</p>;
}

关于自定义Hook无效的原因 #

自定义Hook是用来复用状态逻辑的，每个组件调用自定义Hook都会创建独立的状态实例。你在Component中调用自定义Hook得到的TestFnc，更新的是Component自身的状态，而非Test组件的状态，因此无法达到预期效果。

内容的提问来源于stack exchange，提问作者Vinícius Grippe