Ionic React JSX元素类型'false | Element'不是JSX元素的构造函数。输入'false

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 />
</>;

我在TimeLineAuto中的时间轴调用标签上收到错误：SX元素类型为'false | Element'不是JSX元素的构造函数。类型'false'不可分配给类型'Element | null'.ts（2605）...

Answer 1

尝试一下