Ionic React JSX 元素類型 'false | Element' 不是 JSX 元素的構造函數 function。 輸入'假

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 元素的構造函數 function。 類型 'false' 不可分配給類型 'Element | 空'.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 時，它將返回false ，這不是可接受的返回值。 新代碼將返回null這是