ReactTypescript組件的遞回介面-有解無憂

該組件是一個面包屑，它必須接收一個物件作為道具，該物件包含一個標題和一個 url 以及一個選項子節點。最大深度應該是 5，在這種情況下，這是一個道具示例：

myProps = {
            title: "level 1",
            url: "/",
            children: {
                        title: "level 2"
                        url: "/level2"
                        children: { 
                                    title: "level 3"
                                    url: "level2/level3"
                                    children: {
                                                title: "level 4"
                                                url: "level2/level3/level4"
                                                children: {
                                                            title: "level 5"
                                                            url: "/level2/level3/level4/level5"
                                                          }
                                               }
                                  }
                       }
          };

但它也可以減少嵌套，例如：

myProps = {
            title: "title1"
            url: "/"
            children: null
          }

界面應該是什么樣子的？

這樣對嗎？

export interface MyProps {
  title: string;
  url: string;
  children: MyProps;
}

uj5u.com熱心網友回復：

你需要考慮那些沒有孩子的人，所以

export interface MyProps {
  title: string;
  url: string;
  children?: MyProps | null;
}

uj5u.com熱心網友回復：

您的界面是一個好的開始！如果我做對了，MyProps.children是可選的，對嗎？在這種情況下，您可以像這樣宣告它：

export interface MyProps {
  title: string;
  url: string;
  children?: MyProps;
}

這允許您children在宣告型別變數期間省略該屬性MyProps并顯式分配它undefined：

const myProps: MyProps = {
  title: "title1",
  url: "/"
};

const otherProps: MyProps = {
  title: "title1",
  url: "/",
  children: {
    title: "title2",
    url: "/otherUrl"
  }
};

const yetOtherProps: MyProps = {
  title: "title1",
  url: "/",
  children: undefined
};

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/357509.html

標籤：javascript 反应打字稿界面反应-tsx

上一篇：陣列=復合資料型別=類？

下一篇：CSS：對齊圖示右側的文本