打字稿 - 反应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元素的构造函数 .

请注意,错误与组件的 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)

3 years ago

定义无状态组件时,它是一个简单而简单的函数 .

当你实例化它(即将它传递给 React.createElement )时,它会被 React.StatelessComponent 包裹 .

3 years ago

错误TS2605:JSX元素类型'Element'不是JSX元素的构造函数 . “元素”类型中缺少属性“render” .

这将在TypeScript最新 npm install typescript@latest 中正常工作 .

3 years ago

我必须使用 @next 安装打字稿:

npm install typescript @ next --save-dev

在这个答案的那一刻, @next 版本是 1.9.0-dev.20160217 .

在开始我虽然问题是 react.d.tsreact-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 安装后,您不能依赖 npmtypescript 的依赖关系更新为更大的版本号 .

正如他们解释的那样, 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" ,以便始终使用最新的最新版本:

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

我个人没有尝试过,因为我喜欢完全控制我正在使用的版本 . 反正我很少跑 npm update .