不能用作 JSX 组件 它的返回类型 string | 元素不是有效的 JSX 元素类型“string”不可分配给类型“Element | 无效的'

Question

I created a react function EventDateTooltip:

import React from 'react';
import { endOfDay, isToday, isTomorrow, isYesterday } from 'date-fns';
import { useTranslation } from 'react-i18next';
import I18nWrapper from '../i18n-wrapper';
import DateFormater from '../formaters/date-formater';

 const EventDateTooltip = ({ date }: { date: string }) => {
 const { t } = useTranslation();
 const dateTooltip = endOfDay(new Date(date));
  if (isTomorrow(dateTooltip)) return t('tooltip.event.date.tomorrow');
  if (isYesterday(dateTooltip)) return t('tooltip.event.date.yesterday');
  if (isToday(dateTooltip)) return t('tooltip.event.date.today');

 return (
   <>
  <span key={date.toString()}>
    <I18nWrapper translateKey="tooltip.event.date.the" />{' '}
    <DateFormater dateToFomat={date} formater="full-date" />
  </span>
</>
  );
};

export default EventDateTooltip; 

this function return a text and a translated date.

when I call this function on another component:

 <EventDateTooltip date={props.event.endDate}></EventDateTooltip>;

the call returns the following error message:

Its return type 'string | Element' is not a valid JSX element.
   Type 'string' is not assignable to type 'Element | null'.  TS2786

has anyone got the following message?

Answer 1

As stated in this answer , currently TypeScript's React types do not allow you to return a string from a React component and include that in a component tree.

You can wrap your strings with fragments to avoid the error:

// [...]
  if (isTomorrow(dateTooltip)) return <>t('tooltip.event.date.tomorrow')</>;
  if (isYesterday(dateTooltip)) return <>t('tooltip.event.date.yesterday')</>;
  if (isToday(dateTooltip)) return <>t('tooltip.event.date.today')</>;
// [...]