React-js & Typescript & React-bootstrap 类型

Question

在我的项目中，我有登录表单，我将所有元素保存在数组中，如下所示：

const inputs: [*****] = [
    <Form.Group>
      <Form.Label>username</Form.Label>
      <Form.Control
        placeholder="enter username"
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          setUsername(e.target.value)
        }
        value={username}
      ></Form.Control>
    </Form.Group>,
    <Form.Group>
      <Form.Label>password</Form.Label>
      <Form.Control
        placeholder="enter password"
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          setPassword(e.target.value)
        }
        value={password}
      ></Form.Control>
    </Form.Group>,
    <Button variant="primary">Login</Button>,
  ];

我想用 map 函数渲染这个数组，但我不知道我需要在我放置的 **** 上写什么类型。我怎么知道类型？

Answer 1

如果你使用的是Visual Studio代码，可以去掉类型，然后点击重构快捷键(Ctrl.) 在变量上。弹出菜单后，单击 Infer type（或类似的东西），这将自动设置类型。

但是，由于是组件列表，你可以试试这样的类型：React.ReactNode[]

Note that Typescript arrays are not defined with [<type-name>], but <type-name>[].

React-js & Typescript & React-bootstrap 类型

React-js & Typescript & React-bootstrap types

typescript

reactjs

react-bootstrap