前言

前两天，我们知道了何谓 Component 、 Component 如何撰写与 React 开发逻辑。而今天我们要进入 React 重头戏，资料传递。我们在开始前，我们必须要有一个观念，不论是 Vue、 React 基本上框架现在都是走一个单向资料流概念，强调资料 immutable 特性。有了这些基本概念後，我们就开始今天的介绍吧！

Props

资料由父层往下传递时都会透过 Props 属性来传递给子元素。而在实务上时，我们通常会搭配 React Hooks 的 useState 来做资料状态纪录！我们先来简单看个例子吧！

import ExpenseItem from './components/expense'; //引入 ExpenseItem 元件

function Demo(){
  const expense = [
     {
        dollar:1000,
        keeper:Andy
     },
     {
        dollar:20000,
        keeper:Mom
     }
  
  ]
  return(
    <ExpenseItem attribute={expense[0].dollar}/>
  )
}

说明：

元件中我们可以透过自定义 attribute 向引入 Component 传递，如上面我透过自定义 attribute。Props 概念有点像 function 在传递参数，差异仅在於 props 资料是单向流不能修改。而元件在接受外部资料时只会接受到一个物件。

参考资料：

• React - The Complete Guide (incl Hooks, React Router, Redux)