reactjs - TS2604 : JSX element type 'SomeContext' does not have any construct or call signatures

Question

我看到了一些问题，但在创建 react 上下文时没有一个真正解决这个问题。

创建上下文

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

JSX

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

        <BookingContext 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>

类型

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

但是，我收到错误 TS2604:JSX 元素类型“BookingContext”没有任何构造或调用签名。

老实说，我不知道那是什么，我需要一些帮助。

Answer 1

不要使用 BookingContext，而是在 JSX 中使用 BookingContext.Provider。

<BookingContext.Provider value={{ initiateBooking }}>
  /* ... */
</BookingContext.Provider>