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，所以你需要考虑重新组织它。

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