reactjs - Typescript - React 0.14 无状态功能组件

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): error TS2605: JSX element type 'Element' is not a constructor function for JSX elements.

请注意错误与组件的用法有关(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 编译器收到这个错误:

error TS2605: JSX element type 'Element' is not a constructor function for JSX elements. Property 'render' is missing in type 'Element'.

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

Answer 1

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

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