reactjs - 'ReactNode' bukan elemen JSX yang valid

Saya memiliki potongan kode berikut (codesandbox):

import { ComponentType, ReactNode } from "react";

type DatetimeCell = ({ value }: { value: string }) => ReactNode;

function getDateTimeCell(): DatetimeCell {
  return ({ value }) => value;
}

function buildCell({
  value
}: {
  value: string;
}): ComponentType<{ value: string }> {
  const DateTimeCell = getDateTimeCell();
  return ({ value }) => <DateTimeCell value={value} />;
}

Saat mengembalikan di buildCell saya mendapatkan kesalahan:

'DateTimeCell' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.

Saya pikir ReactNode akan menjadi tipe yang paling umum untuk JSX yang valid, tetapi tampaknya itu tidak terjadi.
Mengapa ReactNode bukan JSX yang valid dan bagaimana saya bisa menyelesaikan masalah ini?

Edit: Saya tahu bahwa membungkus value dalam fragment React menyelesaikan masalah ini. Namun, dalam aplikasi spesifik ini saya membutuhkan tipe DatetimeCell agar dapat mengembalikan JSX yang valid apa pun. Jadi string seharusnya disertakan.

Jawaban #1

Mengapa ReactNode bukan JSX yang valid ?? => https://stackoverflow.com/a/72353143/10146901

dan bagaimana saya bisa menyelesaikan masalah ini? => Cukup kembalikan JSX.Element sebagai tipe return fungsi.

function buildCell({ value }: { value: string }): JSX.Element { // ... my codes }

Solusi dari codesandbox Anda

Artikel terkait