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

【问题标题】：Ionic React JSX element type 'false | Element' is not a constructor function for JSX elements. Type 'falseIonic React JSX 元素类型 'false | Element' 不是 JSX 元素的构造函数。输入'假
【发布时间】：2020-08-14 04:58:21
【问题描述】：

我有以下组件 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 元素类型“假 | Element' 不是 JSX 元素的构造函数。类型 'false' 不可分配给类型 'Element |空'.ts(2605)...

【问题讨论】：

标签： javascript css reactjs typescript ionic-framework

【解决方案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，即

【讨论】：