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)]创建了一个包含undefined的20个条目的数组，其中map 将访问：

＆＃13;

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)

＆＃13;

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

＆＃13;

Yury Tarabanko found一个bug report for it。

为什么这些子节点不是在TS中渲染的？

1 个答案: