Question

简单示例：

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

请注意，错误与Component的用法有关（让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

Answer 1

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

实例化时（即将其传递给public class ConsoleInteractionService : IInteractionService { public WinFormsInteractionService() { } private readonly string _showErrorReportDialogFormatString = //... public void ShowErrorReportDialog(Exception e, SqlCommand cmd) { Console.WriteLine(_showErrorReportDialogFormatString, e, cmd); Console.WriteLine("Press enter to continue"); Console.ReadLine(); } }），它会被React.createElement包裹。

Answer 2

错误TS2605：JSX元素类型＆＃39;元素＆＃39;不是JSX元素的构造函数。物业＆＃39;渲染＆＃39;类型＆＃39;元素＆＃39;
中缺少

这在TypeScript最新npm install typescript@latest中可以正常工作。

Answer 3

我必须使用 @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。

有关此内容的一些注意事项，根据博客帖子Using typescript@next nightly package? Don’t rely on –save-dev to be up-to-date!，您不能依赖npm在安装{后typescript更新您的@next依赖关系到更高的版本号{1}}和--save-dev。

正如他们解释的那样，npm update似乎没有从一个测试版更新到下一个版本：

e.g。依赖关系字符串"^1.6.0-dev.20150818"（在package.json内）将包更新为1.6.0-dev.20150825，但在运行1.7.0-dev.20150901

时不会更新为npm update

他们建议将npm --save-dev保存在package.json内的依赖关系字符串更改为"next"，以便始终使用最新的最新版本：

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

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

打字稿 - 反应0.14无状态功能组件

简单示例：

3 个答案:

`npm install typescript@next --save-dev`