(2024/04/06更新) 因應React在18後更新了許多不同的語法，更新後的教學之後將陸續放在 新的blog 中，歡迎讀者到該處閱讀，我依然會回覆這邊的提問

props除了可以綁定資料外，也可以綁定函式。函式的綁定常被運用在不同元件間的溝通。

目前我們在javasript的程式階層如下:

index.js
    |____ App.js

在接下來這幾篇，我們將會討論到不少元件溝通的架構，為了方便說明，我們把:

1. 「使用別人的」稱為父 (如: index.js)
2. 「被別人使用的元件」稱為子元件 (如: App.js)

函式的綁定方法

在這邊，我們會試著在父(index.js)定義一個改變父的函式，綁定在子元件(App.js)的props，並透過子元件觸發。

1. 首先，我們在index.js創造一塊等等用來改變的div:

   ReactDOM.render(
       <div>
           <App name="我的名字"/>
           <div id="show-area"></div> /*這裡是等等用來改變的地方*/
       </div>,
       document.getElementById('root')
   );
   

2. 接著，在index.js定義要使用的函式:

   const printMessage=()=>{
       document.getElementById('show-area').innerHTML="我被按到了";
   }
   

   這個函式被觸發時，會在剛剛render函式新增的div印出「我被按到了」。

3. 綁定printMessage函式到App上:

   ReactDOM.render(
       <div>
           <App name="我的名字" handleClick={printMessage}/> /*綁定函式*/
           <div id="show-area"></div> 
       </div>,
       document.getElementById('root')
   );
   

   要注意的是我們這邊綁定的名稱是handleClick，等等在子元素使用時要用綁定的名稱，而不是我們在index.js的原函式名稱。
   做到這一步，我們的index.js應該會長這樣:

   import React from 'react';
   import ReactDOM from 'react-dom';
   import './index.css';
   import App from './App';
   import * as serviceWorker from './serviceWorker';
   
   const printMessage=()=>{
       document.getElementById('show-area').innerHTML="我被按到了";
   }
   
   ReactDOM.render(
       <div>
           <App name="我的名字" handleClick={printMessage}/>
           <div id="show-area"></div>
       </div>,
       document.getElementById('root')
   );
   

4. 最後在App.js中，把剛剛的函式綁定至button的onClick。使用方式和props的資料一樣:

   function App(props){
     return(
       <button onClick={props.handleClick}>{props.name}</button>
     );
   }
   

到這邊，我們就完成了父對子的函式綁定。當我們執行後會看到

1. 按下前:
   
2. 按下後:
   

預告第21篇: 在子元件利用父元件的函式來改變props資料

前面有提到，props不能被子元件直接更改，但我們有時候還是會希望在子元件自己這更改props資料。確切的示範因為還要搭配還沒教的state，所以會等後面才會來詳細說。不過在這邊先簡單提一下:

1. 在父元件用state來綁定props資料、定義一個修改前面綁定的state的函式綁定在props上
2. 在子元件呼叫剛剛綁定在props上的父元件函式
3. 「父元件函式」就會修改前面綁定的state
4. props就會被改變

因為鐵人賽是一天發一篇的，雖然我不知道是不是真的有人跟著我的文章學，不過還是先提供給有急迫需要的人去搭配版上其他大神的文章:)