javascript - 为什么这些 child 没有在 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;

但在 typescript 中不起作用。为什么？

两者都使用相同的 React 版本。

编辑:

typescript : https://codepen.io/anon/pen/eKGoWo

脚本: 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亲切found一个bug report for it .