提问者:小点点

TypeScript-React 0.14无状态功能组件


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元素的构造函数。

请注意,错误与组件的使用有关(let 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元素类型元素不是JSX元素的构造函数。元素类型中缺少属性渲染。

我怎样才能修好它?在typescript中使用无状态功能组件的正确方法是什么?我用的是最新的react。d、 来自tsd的ts


共3个答案

匿名用户

定义无状态组件时,它是一个简单明了的函数。

当您实例化它时(即,将其传递给React.createElement),它将被React包装。无状态组件

匿名用户

错误TS2605: JSX元素类型元素不是JSX元素的构造函数。元素类型中缺少属性渲染。

这将在TypeScript最新的npm安装typescript@latest中正常工作。

匿名用户

我必须使用@Next安装typecript:


在这个答案的时刻,@Next版本是1.9.0-dev.20160217

起初我认为问题出在react上。d、 ts响应dom。d、 ts。。。但事实并非如此。这里已经安装了这些的最新版本。但真正的问题是我安装了typescript 1.7版。5、最新版本。


关于这一点的一些注意事项:根据使用typescript@next夜间套餐?不要依赖–将开发人员保存为最新版本!,使用@next--save dev安装后,您不能依靠npmtypescript的依赖项更新为更大的版本号。

正如他们所解释的,npm更新似乎不会从一个测试版本更新到下一个版本:

e、 g.依赖项字符串“^1.6.0-dev.20150818”(位于包.json内)将包更新为1.6。0-dev.20150825,但不适用于1.7。0-dev.20150901运行npm更新时

他们建议更改npm--save dev保存在包中的依赖项字符串。json到just“next”始终使用最新版本中的最新版本:

{
  ...
  "devDependencies": {
    ...
    "typescript": "next",
    ...
  }
}

我个人没有尝试过,因为我喜欢完全控制我正在使用的版本。无论如何,我很少运行npm update