2

我有一个死的简单组件。在 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

4

1 回答 1

3

如果您将其从该扩展数组映射更改为

<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好心地为它找到了一个错误报告。

于 2018-06-16T11:58:17.677 回答