组件与打字稿有什么反应答案

【问题标题】：What type does a component have in react with typescript组件与打字稿有什么反应
【发布时间】：2017-11-28 14:07:30
【问题描述】：

我是使用打字稿的新手。我将一个组件传递给另一个组件进行测试，因为它有一些愚蠢的依赖关系。接收组件将在其 props 中列出参数组件。因为我使用的是打字稿，所以我必须给它一个类型。我需要给它什么类型？

我需要避免包含该文件，因为我想从本质上模拟它。（也许有更好的方法可以做到这一点，我正计划用测试中的函数替换它。）

下面是我所说的一个例子：

// Parent Component
import { Thing } from '../thing'

export default class SomeParent extends React.Component<Props, {}> {


  public render() {
      return (
        <Prem
          Thing={Thing}
        />
      )
  }  
}


// Prem file
export interface Props {
  Thing: What goes here?
}

export default class Prem extends React.Component<Props, {}>{

  // Do stuffs  
  public render() {
    return (
      <Thing>
        <div> herp derp </div>
      </Thing>
    )
  }
}

【问题讨论】：

为什么你认为React.Component不合适？
React.ComponentClass<P> 呢？

标签： reactjs typescript enzyme jestjs

【解决方案1】：

您可以使用React.ComponentClass<{}> 或React.SFC<{}>（后者用于无状态组件）类。

var thing : React.ComponentClass<{}> = ThingComponent
var sfThing : React.SFC<{}> = props => <div></div>  {/*Your component's markup*/}

要创建实例，请使用：

React.createElement(thing, {props}, [children])

其中{props} 是键值对对象，表示道具键和值。

【讨论】：