React+TypeScript跨组件状态修改问题：无法调用其他组件的handlePath

你当前的写法无法生效的核心原因是：组件的内部状态和方法是封装在自身作用域内的，外部组件无法直接访问。Func1里的homePath和handlePath都是它的局部变量，Func2作为独立组件根本拿不到这些内容，自然无法通过点击按钮修改状态。

下面给你三种实际可行的解决方案，根据你的组件层级和业务场景选择：

方案一：状态提升（最适合组件有共同父组件的场景） #

把共享的状态提到两个组件的共同父组件中，再通过props把修改方法传给Func2，把状态值传给Func1。

1. 共同父组件（比如App.tsx）：

import Func1 from './file1';
import Func2 from './file2';
import { useState } from 'react';

export default function App() {
  // 把状态提升到父组件
  const [homePath, setHomePath] = useState(0);
  const handlePath = () => setHomePath(1);

  return (
    <>
      {/* 把状态传给Func1 */}
      <Func1 homePath={homePath} />
      {/* 把修改方法传给Func2 */}
      <Func2 handlePath={handlePath} />
    </>
  );
}

2. 修改file1.tsx，通过props接收状态：

// 定义props类型
interface Func1Props {
  homePath: number;
}

export default function Func1({ homePath }: Func1Props): JSX.Element {
  // 不再需要自己的局部state，直接用父组件传过来的值
  return (
    homePath ? 
      <div>homePath为1时展示的内容</div> :
      <div>初始内容</div>
  );
}

3. 修改file2.tsx，通过props接收修改方法：

interface Func2Props {
  handlePath: () => void;
}

export default function Func2({ handlePath }: Func2Props): JSX.Element {
  return (
    <Button data-testid="botaoCadastro" onClick={handlePath} to="/Cadastro" shadow>
      Button
    </Button>
  );
}

方案二：使用React Context（适合组件层级深或多组件共享状态的场景） #

通过Context创建全局可访问的状态容器，让Func1和Func2都能获取和修改状态。

1. 创建PathContext.tsx：

import { createContext, useContext, useState, ReactNode } from 'react';

// 定义Context的类型
interface PathContextType {
  homePath: number;
  setHomePath: (value: number) => void;
}

// 创建Context，默认值为undefined
const PathContext = createContext<PathContextType | undefined>(undefined);

// 定义Provider组件，包裹需要共享状态的组件
export function PathProvider({ children }: { children: ReactNode }) {
  const [homePath, setHomePath] = useState(0);
  return (
    <PathContext.Provider value={{ homePath, setHomePath }}>
      {children}
    </PathContext.Provider>
  );
}

// 自定义Hook，简化Context的使用
export function usePath() {
  const context = useContext(PathContext);
  if (!context) {
    throw new Error('usePath必须在PathProvider内部使用');
  }
  return context;
}

2. 在根组件（比如App.tsx）中包裹Provider：

import { PathProvider } from './PathContext';
import Func1 from './file1';
import Func2 from './file2';

export default function App() {
  return (
    <PathProvider>
      <Func1 />
      <Func2 />
    </PathProvider>
  );
}

3. 修改file1.tsx，通过自定义Hook获取状态：

import { usePath } from './PathContext';

export default function Func1(): JSX.Element {
  const { homePath } = usePath();

  return (
    homePath ? 
      <div>homePath为1时展示的内容</div> :
      <div>初始内容</div>
  );
}

4. 修改file2.tsx，通过自定义Hook获取修改方法：

import { usePath } from './PathContext';

export default function Func2(): JSX.Element {
  const { setHomePath } = usePath();
  const handlePath = () => setHomePath(1);

  return (
    <Button data-testid="botaoCadastro" onClick={handlePath} to="/Cadastro" shadow>
      Button
    </Button>
  );
}

方案三：如果Func2是Func1的子组件 #

如果Func2是在Func1内部渲染的，直接把handlePath作为props传给Func2即可：

1. 修改file1.tsx：

import Func2 from './file2';
import { useState } from 'react';

export default function Func1(): JSX.Element {
    const [homePath, setHomePath] = useState(0);
    const handlePath = () => setHomePath(1);

    return (
      <>
        {homePath ? <div>内容</div> : <div>初始内容</div>}
        {/* 把方法传给子组件Func2 */}
        <Func2 handlePath={handlePath} />
      </>
    );
}

2. file2.tsx的修改和方案一一致，通过props接收handlePath即可。

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