React中如何从组件文件导出钩子局部变量供其他文件使用？

因为Aya是BasicExample组件的局部状态，没法直接导出，下面是几种可行的解决方法：

1. 状态提升到父组件（最推荐） #

把useState从BasicExample移到app.js，通过props把状态和更新方法传给BasicExample，这样app.js本身就能直接访问Aya：

app.js 代码：

import BasicExample from './BasicExample';
import { useState } from 'react';

function App() {
  const [Aya, setAya] = useState({data});
  
  return (
    <div>
      {/* 直接在app.js里使用Aya */}
      <p>{JSON.stringify(Aya)}</p>
      <BasicExample Aya={Aya} setAya={setAya} />
    </div>
  );
}

export default App;

BasicExample 组件修改：

function BasicExample({ Aya, setAya }) {
  // 这里直接使用传入的Aya和setAya，原来的修改逻辑不变
  // code containing modifications to apply to Aya
}

export default BasicExample;

2. 使用Context API（适合多层级组件） #

如果app.js和BasicExample之间层级较深，props传递太繁琐，可以用Context共享状态：

创建AyaContext.js：

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

const AyaContext = createContext();

export function AyaProvider({ children }) {
  const [Aya, setAya] = useState({data});
  
  return (
    <AyaContext.Provider value={{ Aya, setAya }}>
      {children}
    </AyaContext.Provider>
  );
}

export function useAya() {
  return useContext(AyaContext);
}

app.js 代码：

import { AyaProvider, useAya } from './AyaContext';
import BasicExample from './BasicExample';

function AppContent() {
  const { Aya } = useAya();
  
  return (
    <div>
      <p>{JSON.stringify(Aya)}</p>
      <BasicExample />
    </div>
  );
}

function App() {
  return (
    <AyaProvider>
      <AppContent />
    </AyaProvider>
  );
}

export default App;

BasicExample 组件修改：

import { useAya } from './AyaContext';

function BasicExample() {
  const { Aya, setAya } = useAya();
  // code containing modifications to apply to Aya
}

export default BasicExample;

3. 使用全局状态管理库（适合大型应用） #

如果你的应用需要多个组件共享大量状态，可以用Redux、Zustand这类状态管理库，把Aya放到全局状态中，app.js和BasicExample都可以直接读写这个状态。

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