为什么这些 children 没有在 TS 中呈现为数组？

Question

我有一个非常简单的组件。在 javascript.

中完美运行

const Test = (props: any) => <div>{props.children}</div>;

const Root: React.SFC<{}> = props => {
  return (
    <div className="Root">
      <h1>hello world.</h1>
      <Test>{[...Array(20)].map((_, index) => <h1>test{index}</h1>)}</Test>
    </div>
  );
};

export default Root;

但在打字稿中不起作用。为什么？

两者使用相同的 React 版本。

编辑：

打字稿： https://codepen.io/anon/pen/eKGoWo

JavaScript: https://codepen.io/anon/pen/GGMLOv

Answer 1

如果您将它从展开数组映射更改为

，它会起作用

<Test>{Array.from({length:20}, (_, index) => <h1 key={index}>test{index}</h1>)}</Test>

（我还添加了 key，因为 React 一旦开始工作就会抱怨。:-)）

不工作：https://codepen.io/anon/pen/XYeQzv?editors=1010

工作：https://codepen.io/anon/pen/eKGoya?editors=1010

这与 TypeScript 如何转译传播符号有关。 TypeScript 正在将 [...Array(20)].map(/*...*/) 转换为：

Array(5).slice().map(/*...*/)

问题在于 Array(20) 创建了一个长度为 20 的数组，其中 没有条目 。 slice 复制那个。 map 只访问数组中实际存在的条目，而不是间隙。但是 [...Array(20)] 创建一个包含 20 个条目的数组，其中包含 undefined，map 将访问：

const a1 = [...Array(5)];
console.log(0 in a1);   // true
const a1m = a1.map((_, index) => index);
console.log(0 in a1m);  // true
console.log(a1m);       // 0, 1, 2, 3, 4

const a2 = Array(5).slice();
console.log(0 in a2);   // false
const a2m = a2.map((_, index) => index);
console.log(0 in a2m);  // false
console.log(a2m);       // (gaps)

Look in the real console (the snippet console gives the impression values exist in the array when they don't).

Yury Tarabanko kindly a bug report for it.

为什么这些 children 没有在 TS 中呈现为数组？

Why are these children as array not rendered in TS?

javascript

typescript

reactjs

react-tsx