使用React useContext的Typescript界面

// Step 1: 创建上下文对象
import React from 'react';

interface AppContextInterface {
  data: string;
  updateData: (newData: string) => void;
}

const AppContext = React.createContext<AppContextInterface>({
  data: '',
  updateData: () => {},
});

// Step 2: 在父组件中使用Provider组件包裹子组件
const App: React.FC = () => {
  const [data, setData] = React.useState('');

  const updateData = (newData: string) => {
    setData(newData);
  };

  return (
    <AppContext.Provider value={{ data, updateData }}>
      <ChildComponent />
    </AppContext.Provider>
  );
};

// Step 3: 在子组件中使用useContext钩子获取共享数据
const ChildComponent: React.FC = () => {
  const { data, updateData } = React.useContext(AppContext);

  return (
    <div>
      <p>{data}</p>
      <button onClick={() => updateData('New Data')}>Update Data</button>
    </div>
  );
};