reactjs 如何将接口或类型的键作为字符串获取？

hc8w905p 于 2023-02-03 发布在 React

关注(0)|答案(1)|浏览(121)

我将此Patient实体定义为接口

export interface Patient {
  name: string;
  greeting: string;
}

我想创建一个表头，该表头将显示患者界面中的每个键，而无需在界面中添加或删除键时在渲染函数中显式修改它们。
我在考虑类似下面的伪代码

<tr>
    keys of Patient.map((key) => <th>key.toString()</th>)
</tr>

问题是我似乎无法将伪代码转换为实际代码。我尝试过同时使用类型和接口，我已经做了一段时间了，但是我似乎无法理解这一点。
我正试图更好地精通Typescript，并在React中使用它的潜力，任何帮助都非常感谢：）

1条答案

接口在运行时并不真正存在。它们只存在于编译和lint过程中。因此，在运行时没有办法列出接口的键。你能做的最好的事情就是为你的接口创建一个伪对象：

const dummyPatient: Patient = {name: "", greeting: ""}

然后获取dummyPatient的密钥：

<tr>
    {Object.keys(dummyPatient).map((key) => <th>{key}</th>)}
</tr>