![](/img/trans.png)
[英]JSX element type 'string' is not a constructor function for JSX elements. Typescript
[英]Ionic React JSX element type 'false | Element' is not a constructor function for JSX elements. Type 'false
我有以下组件 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)...
尝试这个
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
这是
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.