React Typescript:返回Jsx元素的数组

Question

我正在尝试使用React和TypeScript,但信息很少.

我在JavaScript中有这种情况:

render: function() {

  var stars = [];

  for (var idx = 1; idx <= this.state.max; idx++) {
    var fill = idx <= this.props.data.score;
    var hover = idx <= this.state.hoverIndex;
    stars.push(<RatingStar fill={fill} index={idx} data={this.props.data} hoverFill={hover} hover={this.hoverStar} leave={this.leaveStar} />);
  }
  return stars;


}

这在简单的JavaScript中很容易.我只返回一个元素数组.但是在TypeScript中,这段代码给了我一个错误,因为它render()返回一个JSX元素,而不是一个数组.如果我将返回类型更改为JSX元素的数组,则错误是类没有实现React.component ...所以任何想法？

Answer 1

更新

这将适用于React 16和最新的TypeScript定义.对于React 15及以下版本的人,保留以下答案

老答案

render()返回单个JSX元素而不是数组

这是TypeScript实际上帮助你.你必须从中返回一个元素render.

固定

考虑将输出包装在一个div.这可能会打破你的CSS,所以你需要考虑重新组织它.

或者,不要{callFoo()}在JSX中创建组件而不是<Foo/>.