React.render 在 TypeScript 中用于同时具有 props 和 state 的组件

Question

我有一个带有 React 组件的 TypeScript TSX 文件，如下所示：

interface IHiProps {
  a: string;
  b: string;
}

interface IHiState {

}

class Hi extends __React.Component<IHiProps, IHiState> {
  // render…
}

如何在 TypeScript 中正确呈现此组件？

var hiComponent: __React.Component<IHiProps, IHiState>;
hiComponent = __React.render(__React.createElement(Hi), { a: "A", b: "B" }, document.body);

这让我失望 'typeof Hi' 类型的参数无法分配给 'ComponentClass' 类型的参数。我正在使用来自 the DefinitelyTyped repository of Boris Yankov.

的明确类型文件

Answer 1

像这样更改 class 是否有效？

class Hi extends __React.Component<IHiProps, IHiState> {
  static propTypes: __React.ValidationMap<any> = {
    a: __React.PropTypes.string,
    b: __React.PropTypes.string
  }

  // render…
}

还使用 __React 是可疑的，因为它是 React.d.ts 的内部变量。在运行时不会有这样的变量 - 如果你不创建它。考虑使用模块：

/// <reference path="/path/to/react.d.ts" />
import * as React from React;

React.render 在 TypeScript 中用于同时具有 props 和 state 的组件

React.render in TypeScript for component with both props and state

typescript

reactjs

tsx