“ReactNode”不是有效的 JSX 元素

Question

I have the following piece of code ( 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} />;
}

When returning in buildCell I get the error:

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

I thought ReactNode would be the most general type for valid JSX, but it seems like that is not the case.
Why is ReactNode not valid JSX and how can I solve this issue?

Edit: I know that wrapping value in React fragments solves the issue. However, in this specific application I need the type DatetimeCell to be able to return any valid JSX. So string should be included.

Answer 1

Why is ReactNode not valid JSX ?? => https://stackoverflow.com/a/72353143/10146901

and how can I solve this issue? => Just Return JSX.Element as function return type.

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

Solution of your codesandbox

Answer 2

Part of ReactNode type is undefined , which is not a valid JSX element I think.

The easiest way to solve the problem would be just to type DatetimeCell as Component as well, and always return an element from getDateTimeCell - just wrap the result in a fragment.

import React, { ComponentType } from 'react';

type DatetimeCell = ComponentType<{ value: string }>;

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

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

Answer 3

When you invoke DateTimeCell it expects a JSX element (ReactNode) to be returned. You are currently returning a string and not a React node in your getTimeCell function. I recommend typing your functional components using the FC type provided by react as below:

import { FC } from "react";

type Props = { value: string };
type DatetimeCell = FC<Props>;

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

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

buildCell({ value: "hello" });