Ioni c React JSX тип элемента 'ложь | Элемент 'не является функцией конструктора для элементов JSX. Тип 'ложь

Question

У меня есть следующие компоненты Timeline и TimeLineItem:

import React from 'react';
import TimelineItem from './TimelineItem';


const timelineData = [
    {
        text: 'Started working on the app-ideas repository',
        date: 'May 25 2020',
        category: {
            tag: 'app-ideas',
            color: '#FFDB14'
        },
        link: {
            url: 'https://google.com',
            text: 'Check it out on GitHub'
        }
    },
    ................
]
const Timeline = () =>
    timelineData.length > 0 && (
        <div className="timeline-container">
            {timelineData.map((data: any, idx: any) => (
                <TimelineItem data={data} key={idx} />
            ))}
        </div>
    );

export default Timeline;

import React from 'react';

interface AppliedRouteProps {
    data: any;
}
const TimelineItem = ({ data }: AppliedRouteProps) => (
    <div className="timeline-item">
        <div className="timeline-item-content">
            <span className="tag" style={{ background: data.category.color }}>
                {data.category.tag}
            </span>
            <time>{data.date}</time>
            <p>{data.text}</p>
            {data.link && (
                <a
                    href={data.link.url}
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    {data.link.text}
                </a>
            )}
            <span className="circle" />
        </div>
    </div>
);

export default TimelineItem;

Страница:

const TimeLineAuto = () => <>
    <h1>React Timeline</h1>
    <Timeline />
</>;

Я получаю ошибки по тегу вызова Timeline в TimeLineAuto: SX тип элемента 'ложь | Элемент 'не является функцией конструктора для элементов JSX. Тип «ложь» не может быть назначен типу «Элемент | null'.ts (2605) ...

Answer 1

попробуйте это

const Timeline = () =>
    timelineData.length > 0 ? (
    <div className="timeline-container">
      {timelineData.map((data: any, idx: any) => (
        <TimelineItem data={data} key={idx} />
      ))}
    </div>
  ) : null;

со своим старым кодом, когда timelineData.length > 0 был ложным, он вернул бы false, что не является приемлемым возвращаемым значением. Новый код вернет null, что