属性 'map' 在类型 '() => IterableIterator 上不存在<number> '</number>

Question

我正在尝试将keys作为 React 道具传递：

import * as React from "react";
import { render } from "react-dom";

const keys: string[] = ["a", "b"];

function App({keys}: string[]) {
  return (
    <div>
      {keys.map((key: string) => (
        <li>{key}</li>
      ))}
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App keys={keys} />, rootElement);

但是，我收到以下错误：

类型“() => IterableIterator”上不存在属性“map”。

类型“string[]”不可分配给类型“() => IterableIterator”。

为什么会这样，如何解决？

直播代码： https://codesandbox.io/s/changing-props-on-react-root-component-forked-9lj9ye?file=/src/index.tsx:0-341

Answer 1

您将整个道具输入为string[]而不仅仅是keys 。 在 object 中嵌入keys道具：

function App({ keys }: { keys: string[]; }) {
  // ...

或者使用接口：

interface AppProps {
  keys: string[];
}

function App({ keys }: AppProps) {
  // ...

或者一个类型：

type AppProps {
  keys: string[];
}

function App({ keys }: AppProps) {
  // ...

进一步到 go： 类型别名和接口之间的区别