每天學習一個Components方法來到了第三天 \（-O-）/

上一篇提到了直接在本身的Components宣告常數並帶入的使用方法，今天來使用props試試看進行外部資料的傳遞吧～

在 React 中使用props可以自定義變數傳入元件中並且渲染出來 {props.屬性}。
以下範例將會自訂宣告變數，接著在 app.js 中去調用它並給予值，使用 props 將數據從外部組件傳遞給子（product.js）的Components做使用。

在App.js中宣告了expenses的常數，並且在其中定義了title及price的值

const App = () => {
  const expenses = [
    {
      title: "produce 1",
      price: "$100",
    },
    {
      title: "produce 2",
      price: "$200",
    },
    {
      title: "product 3",
      price: "$300",
    },
    {
      title: "product 4",
      price: "$400",
    },
  ]

頁面繼續停留在App.js中，將title及price值放入<Product></Product>標籤中。
(Product的Components延續使用D-6的設定)

import React from "react"
import Product from "./components/Product"

const App = () => {
  const expenses = [
    {
      title: "produce 1",
      price: "$100",
    },
    {
      title: "produce 2",
      price: "$200",
    },
    {
      title: "product 3",
      price: "$300",
    },
    {
      title: "product 4",
      price: "$400",
    },
  ]
  return (
    <div>
      <h1>鐵人賽開跑</h1>
      // 將 title 及 price 值放入 <Product></Product> 標籤中
      <Product title={expenses[0].title} price={expenses[0].price}></Product>
      <Product title={expenses[1].title} price={expenses[1].price}></Product>
      <Product title={expenses[2].title} price={expenses[2].price}></Product>
      <Product title={expenses[3].title} price={expenses[3].price}></Product>
    </div>
  )
}

export default App

接著來到Product.js的Components，將參數名稱設定為props(參數的命名可以依照本身的需求做變更，也可以自訂為"data"、"aabbcc"等等～)。在<h2>標籤中使用{}並且用 props.屬性 來取得值，依此類推在<p>標籤中也使用{}＋props.屬性取值

import React from "react"
import "./product.css"

const Product = (props) => {
  return (
    <div>
      <div className="expense-item__description">
        <h2 className="expense-item h2">{props.title}</h2> //{}+ props.屬性
        <p className="expense-item__price">{props.price}</p> //{}+ props.屬性
      </div>
    </div>
  )
}

export default Product

設定完成後頁面渲染的畫面將會如下圖～

props使用限制
Props 是唯獨的（ read-only ）代表的是 props 物件不能自行在元件內部進行修改

以上內容如果有任何地方有誤，歡迎各位大大們給予指教> <