React中如何跨函数访问组件内部声明的const状态变量

没有直接实现的方式。JavaScript遵循词法作用域规则，函数内部声明的局部变量默认仅在函数作用域内部可访问，你示例中Function1的hello是React组件的内部状态，本身就是封装隔离的，没有原生的直接对外暴露的接口，因此无法直接在Function2中访问。

React场景可行方案 #

你可以根据项目实际情况选择以下方案实现状态共享：

• 方案1：状态提升
  把hello状态从Function1提升到两个组件的公共父组件中，再通过props分别传递给需要用到该状态的组件。该方案是React官方推荐的基础状态共享方案，适合组件层级近、共享范围小的场景。
  示例代码：

  // 公共父组件
  function Parent() {
    const [hello, setHello] = useState('hello');
    return (
      <>
        <Function1 hello={hello} setHello={setHello} />
        <Function2 hello={hello} />
      </>
    )
  }
  
  function Function1({hello, setHello}) {
    // 直接使用传入的状态和修改方法即可
    return(
      // 原有返回逻辑
    )
  }
  
  function Function2({hello}) {
    var hello2 = hello; // 直接获取hello的值
  }
  

• 方案2：Context API
  如果两个组件层级差距大，或者有多层嵌套组件都需要使用该状态，用props层层传递成本太高时，可以用React原生的Context API实现跨层级状态共享。
  示例代码：

  // 第一步：创建Context容器
  const HelloContext = React.createContext();
  
  // 第二步：在公共父组件用Provider包裹子组件树，传入需要共享的状态
  function Parent() {
    const [hello, setHello] = useState('hello');
    return (
      <HelloContext.Provider value={{hello, setHello}}>
        {/* 内部任意层级的组件都可以访问共享状态 */}
        <Function1 />
        <Function2 />
      </HelloContext.Provider>
    )
  }
  
  // Function1中使用状态
  function Function1() {
    const {hello, setHello} = React.useContext(HelloContext);
    return(
      // 原有返回逻辑
    )
  }
  
  // Function2中使用状态
  function Function2() {
    const {hello} = React.useContext(HelloContext);
    var hello2 = hello;
  }
  

• 方案3：第三方状态管理库
  如果是大型项目，存在大量跨组件、跨模块的状态共享需求，可以使用Redux、Zustand、Jotai等第三方状态管理库，把需要共享的状态抽离到组件外部的全局store中，所有组件都可以直接从store读写状态。
  以轻量状态库Zustand为例：

  // 定义全局store
  import { create } from 'zustand'
  const useHelloStore = create((set) => ({
    hello: 'hello',
    setHello: (newVal) => set({hello: newVal})
  }))
  
  // Function1中使用
  function Function1() {
    const hello = useHelloStore(state => state.hello);
    const setHello = useHelloStore(state => state.setHello);
    return(
      // 原有返回逻辑
    )
  }
  
  // Function2中使用
  function Function2() {
    const hello = useHelloStore(state => state.hello);
    var hello2 = hello;
  }
  

• 方案4：暴露组件引用（非常规方案，不推荐）
  如果有特殊场景需要直接获取组件内部状态，可以配合useImperativeHandle和forwardRef把内部状态暴露给父组件，再由父组件传递给其他需要的组件。但该方案会打破组件的封装性，非特殊场景不建议使用。

普通JavaScript场景方案 #

如果是非React的普通JS场景，要跨函数/跨模块访问内部变量，可以选择以下方案：

• 闭包导出：函数执行后返回包含内部变量引用的方法或对象，即可在外部访问内部变量
  示例代码：

  function func1() {
    const innerVal = '内部变量';
    return {
      getInnerVal: () => innerVal
    }
  }
  const func1Instance = func1();
  console.log(func1Instance.getInnerVal()) // 可成功获取内部变量
  

• 模块导出：如果是ES模块中的变量，直接通过export导出该变量，其他模块通过import引入即可使用
• 挂载到全局对象：将变量挂载到window、globalThis等全局对象上实现全局访问，但该方案会污染全局命名空间，非常不推荐。

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