在 TypeScript React 中使用接口作为属性

Question

我有一个名为Tab的 class ，它具有三个道具：

• num: string
• desc: string
• parts: Part[]

其中Part在Tab.tsx中有此代码：

interface Part {
    desc: string,
    link: string
}

但是当我在Menu.tsx （父级）中创建一个Tab时，我不确定如何定义部件属性。

<Tab num="1" desc="Description" parts=? />

我该如何 go 关于这个？

Answer 1

parts是一个对象数组，形状为{ desc: string; link: string; } { desc: string; link: string; } { desc: string; link: string; } 。

以这种方式传递： [{ desc: "foo", link: "bar" }, { desc: "foo", link: "baz" }] 。

例子：

<Tab
 num="1"
 desc="Description"
 parts={[{ desc: "foo", link: "bar" }, { desc: "foo", link: "baz" }]}
/>