道具基礎：第 1 部分

這是一個關於如何使用道具的初學者友好教學。在閱讀之前了解什麼是解構以及如何使用/創建元件非常重要。

Props，properties的縮寫，props允許我們從父組件向子組件發送訊息，同樣需要注意的是它們可以是任何資料類型。

必須了解為任何元件建立 prop 的語法。在 React 中，您必須使用相同的語法來編寫 html 標籤的屬性。我們指定 prop 的方式是將其放入我們的元素中，如下所示：

ParentPlant() {
  return <ChildPlant text="Hey Farmer! Says plant" number={2} isPlant={true} /> 
}

建立 Props 時要記住的一個好規則是：字串不需要在其值周圍使用大括號，我們只對其他資料類型這樣做。正如你在上面看到的，我們可以透過將它們指派給父元件來擁有大量的 props。當我們的元件中包含 props 時，重要的是要知道我們在技術上將它們傳遞下來。一旦我們傳遞了 props，我們就需要能夠在我們想要的元件中接收它們。在本例中是我們的 ChildPlant 元件。

接收道具：

function ChildPlant(props) {
  return (
    <>
      {props.text} {props.number}
    </>
  )
}

我們在這裡做的事情： 1. 我們在 ChildPlant 元件的參數中接收 prop，2. 我們透過 prop 的名稱解構 prop 的值。重要的是要知道我們的 props 不是 參數，而是與參數類似的功能。

將父元件資料傳遞給子元件的唯一方法是透過 props。我喜歡把它想像成 DNA，父組件擁有其內部已經存在的自身的各個方面。因為孩子也可以擁有父母 DNA 的某些方面，所以道具的作用就像是使孩子的頭髮變成紅色、黑色或金色的激活器。

道具在子函數中接收並透過父函數發送，但道具只能向下發送而不能向上發送。我們也可以將道具視為物體。這是因為它們本質上保存類似於鍵：值對的資料。回顧為什麼它們與參數相似，因為它們在其中儲存多個物件。我喜歡將接收道具的區域視為佔位符。它們佔用了我們想要與元件共享的某些物件的空間，並在需要時透過解構和點符號進行交換。

這裡有一個很好的視覺化方法：

在這裡，我們可以視覺化保存方框內所有內容的道具，每個道具都保存第一個範例中各自的資料值。現在我們只需使用解構方法來取得 prop 的值。簡而言之，這就是如何使用道具！

以上是道具基礎：第 1 部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！