React Context创建遇TS2604错误：JSX元素无构造或调用签名求助

问题原因 #

你直接将BookingContext当作JSX组件使用，但React Context本身并非可渲染的JSX元素，只有它的**Provider属性**才是用于包裹子组件的上下文提供者组件，这就是触发TS2604错误的根本原因。

修正方案 #

无需修改的代码部分 #

创建Context：

export const BookingContext = createContext<BookingContextType>({ initiateBooking() {}, });

类型定义：

export interface BookingContextType { initiateBooking: (flight: Departures) => void; }

initiateBooking函数定义：

const initiateBooking = (flight: Departures) => { setBooking(true); };

修正后的JSX代码 #

将原代码中的<BookingContext>替换为<BookingContext.Provider>：

<BookingContext.Provider value={{ initiateBooking }}>
  <div className="rounded-lg mt-1 overflow-y-auto h-96 found-flights ">
    {foundFlights?.map((foundFlight) => (
      <FoundFlight foundFlight={foundFlight} sortBy={sortBy} />
    ))}
  </div>
</BookingContext.Provider>

额外说明 #

React Context创建完成后，必须通过其.Provider组件注入上下文值，子组件才能通过useContext(BookingContext)钩子获取到上下文内容。直接使用Context本身会被TypeScript判定为不具备JSX元素的构造/调用签名，进而抛出错误。

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