简单示例:
import * as React from 'react'
declare function getFish(x: any): any;
declare var Tank: any;
var Aquarium = ({species}) => (
<Tank>
{getFish(species)}
</Tank>
);
let x = <Aquarium species="rainbowfish"/>;
结果:
(10,9):错误TS2605:JSX元素类型'Element'不是JSX元素的构造函数 .
请注意,错误与组件的 usage 有关(让x声明) . 似乎React的定义文件可能不允许将其作为有效的JSX?我正在使用tsd的最新React 0.14定义文件,我做错了什么?
假设我已经定义了以下无状态功能组件(React v0.14)
let GreeterComponent = (props: {name: string}){
return <div>Hi {props.name}!</div>
}
在另一个组件中,我使用它是这样的:
class WrappingComponent extends React.Component{
render(){
let names = ['tom', 'john', 'simon'];
return (
<div className="names">
{names.map((name)=> <GreeterComponent name={name} />)}
</div>
);
}
}
我从typescript编译器得到这个错误:
错误TS2605:JSX元素类型'Element'不是JSX元素的构造函数 . “元素”类型中缺少属性“render” .
我该如何解决?在打字稿中使用无状态功能组件的正确性是什么?我正在使用来自tsd的最新react.d.ts
3 回答
这将在TypeScript最新
npm install typescript@latest
中正常工作 .定义无状态组件时,它是一个简单而简单的函数 .
当你实例化它(即将它传递给
React.createElement
)时,它会被React.StatelessComponent
包裹 .我必须使用 @next 安装打字稿:
npm install typescript @ next --save-dev
在这个答案的那一刻,
@next
版本是1.9.0-dev.20160217
.在开始我虽然问题是
react.d.ts
或react-dom.d.ts
...但事实并非如此 . 这里已经安装了最新版本 . 但真正的问题是我安装了最新版本的typescript version 1.7.5 .Some notes about this: 根据博客文章Using typescript@next nightly package? Don’t rely on –save-dev to be up-to-date!,在使用
@next
和--save-dev
安装后,您不能依赖npm
将typescript
的依赖关系更新为更大的版本号 .正如他们解释的那样,
npm update
似乎没有从一个测试版更新到下一个版本:例如依赖关系字符串
"^1.6.0-dev.20150818"
(在package.json
内)将包更新为1.6.0-dev.20150825
,但在运行npm update
时不会更新为1.7.0-dev.20150901
他们建议将
npm --save-dev
保存在package.json
内的依赖关系字符串更改为"next"
,以便始终使用最新的最新版本:我个人没有尝试过,因为我喜欢完全控制我正在使用的版本 . 反正我很少跑
npm update
.