(2024/04/06更新) 因應React在18後更新了許多不同的語法,更新後的教學之後將陸續放在 新的blog 中,歡迎讀者到該處閱讀,我依然會回覆這邊的提問
props除了可以綁定資料外,也可以綁定函式。函式的綁定常被運用在不同元件間的溝通。
目前我們在javasript的程式階層如下:
index.js
|____ App.js
在接下來這幾篇,我們將會討論到不少元件溝通的架構,為了方便說明,我們把:
在這邊,我們會試著在父(index.js)定義一個改變父的函式,綁定在子元件(App.js)的props,並透過子元件觸發。
首先,我們在index.js創造一塊等等用來改變的div:
ReactDOM.render(
<div>
<App name="我的名字"/>
<div id="show-area"></div> /*這裡是等等用來改變的地方*/
</div>,
document.getElementById('root')
);
接著,在index.js定義要使用的函式:
const printMessage=()=>{
document.getElementById('show-area').innerHTML="我被按到了";
}
這個函式被觸發時,會在剛剛render函式新增的div印出「我被按到了」。
綁定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')
);
最後在App.js中,把剛剛的函式綁定至button的onClick。使用方式和props的資料一樣:
function App(props){
return(
<button onClick={props.handleClick}>{props.name}</button>
);
}
到這邊,我們就完成了父對子的函式綁定。當我們執行後會看到
前面有提到,props不能被子元件直接更改,但我們有時候還是會希望在子元件自己這更改props資料。確切的示範因為還要搭配還沒教的state,所以會等後面才會來詳細說。不過在這邊先簡單提一下:
- 在父元件用state來綁定props資料、定義一個修改前面綁定的state的函式綁定在props上
- 在子元件呼叫剛剛綁定在props上的父元件函式
- 「父元件函式」就會修改前面綁定的state
- props就會被改變
因為鐵人賽是一天發一篇的,雖然我不知道是不是真的有人跟著我的文章學,不過還是先提供給有急迫需要的人去搭配版上其他大神的文章:)