如何获得呈现的ID以全局用作在React中发送API请求的变量？

// 创建一个Context
const AppContext = React.createContext();

// 在父组件中提供Context值
class App extends React.Component {
  state = {
    id: 'your-id-here'
  };

  render() {
    return (
      <AppContext.Provider value={this.state.id}>
        <ChildComponent />
      </AppContext.Provider>
    );
  }
}

// 在子组件中使用Context
class ChildComponent extends React.Component {
  static contextType = AppContext;

  componentDidMount() {
    const id = this.context;
    // 使用id发送API请求
  }

  render() {
    return <div>Child Component</div>;
  }
}

// store.js
import { createStore } from 'redux';

const initialState = {
  id: 'your-id-here'
};

function reducer(state = initialState, action) {
  switch (action.type) {
    default:
      return state;
  }
}

const store = createStore(reducer);

export default store;

// 在组件中使用
import { useSelector } from 'react-redux';

function MyComponent() {
  const id = useSelector(state => state.id);

  useEffect(() => {
    // 使用id发送API请求
  }, [id]);

  return <div>My Component</div>;
}

import React, { useReducer, createContext } from 'react';

const initialState = {
  id: 'your-id-here'
};

function reducer(state, action) {
  switch (action.type) {
    default:
      return state;
  }
}

export const AppContext = createContext();

export function AppProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <AppContext.Provider value={state}>
      {children}
    </AppContext.Provider>
  );
}

// 在组件中使用
import { useContext } from 'react';
import { AppContext } from './AppContext';

function MyComponent() {
  const { id } = useContext(AppContext);

  useEffect(() => {
    // 使用id发送API请求
  }, [id]);

  return <div>My Component</div>;
}