Typescript - React 0.14 无状态功能组件

Posted 2023-02-21

【中文标题】Typescript - React 0.14 无状态功能组件

【英文标题】：Typescript - React 0.14 stateless functional components

【发布时间】：2016-04-17 09:59:44

【问题描述】：

简单示例：

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 元素类型“元素”不是 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 元素。 “元素”类型中缺少属性“渲染”。

我该如何解决？在打字稿中使用无状态功能组件的正确方法是什么？我正在使用来自 tsd 的最新 react.d.ts

【问题讨论】：

能否请您发布有关此问题的代码示例？以及您收到的错误。它将帮助我们更轻松地找到您的问题。

另外，请阅读如何提出一个好的问题指南。 ***.com/help/how-to-ask

抱歉，我是 afk 并通过电话发布，稍后会更新我的问题

@toskv - 我用更多信息编辑了我的问题

您可以尝试添加类型吗？ let GreeterComponent: React.SFC

【参考方案1】：

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

当您实例化它（即传递给React.createElement）时，它会被React.StatelessComponent 包裹起来。

【讨论】：

好的，这很有道理，我编辑了我的问题并添加了一些更具体的信息，你能看一下，或许可以帮忙？谢谢

【参考方案2】：

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

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

【参考方案3】：

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

npm install typescript@next --save-dev

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

一开始我虽然问题出在react.d.ts 或react-dom.d.ts... 但事实并非如此。这些的最新版本已经安装在这里。但真正的问题是我安装了最新版本的打字稿版本 1.7.5。

关于此的一些注意事项： 根据博客文章 Using typescript@next nightly package? Don’t rely on –save-dev to be up-to-date!，在使用 @ 安装后，您不能依赖 npm 将 typescript 的依赖项更新为更大的版本号987654329@和--save-dev。

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

例如依赖字符串"^1.6.0-dev.20150818"（在package.json 内）将在运行npm update 时将包更新为1.6.0-dev.20150825，但不会更新为1.7.0-dev.20150901

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

  ...
  "devDependencies": 
    ...
    "typescript": "next",
    ...
  

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