後端開發學React 4 父子元件傳值

這裡將之前的註冊球隊應用進行拆分

拆為兩個模組(暫時去掉互相傳值呼叫)

父模組：premierleagueregister.js子模組：premierleagueregisteritem.js

import react,

from
'react'
import premierleagueregisteritem from
'./premierleagueregisteritem'
class
premierleagueregister
extends
component
}render()
onchange=
/>
>註冊球隊<
/button>
>
<
/fragment>)}
inputchange
(e))
}addlist
(e))
}deleteitem
(index))}
}export
default premierleagueregister

import react,

from
'react'
;class
premierleagueregisteritem
extends
component
render()
}export
default premierleagueregisteritem;

拆分後，新增和刪除均不好用

需要完成兩個事情：

父元件傳遞引數給子元件

子元件呼叫父元件方法

公式

父.js：《子 自定義變數a=/>

子.js：this.props.自定義變數a

公式

父.js：《子 this.父方法.bind(this)/>

子.js：

子方法()

import react,

from
'react'
import premierleagueregisteritem from
'./premierleagueregisteritem'
class
premierleagueregister
extends
component
}render()
onchange=
/>
>註冊球隊<
/button>
//父元件向子元件傳遞引數
contentlist=
//子元件呼叫父元件方法
deleteitem=
/>
<
/fragment>)}
inputchange
(e))
}addlist
(e))
}deleteitem
(index))}
}export
default premierleagueregister

import react,

from
'react'
;class
premierleagueregisteritem
extends
component
onclick=
>
<
/li>)}
)}<
/ul>);
}clickitem
(index)
}export
default premierleagueregisteritem;

React 4課 react初識元件

npm init y npm i babel standalone d npm i react react dom d 安裝完成後我們開始學習下面知識 react初識元件title head div src node modules babel standalone babel.js script ...

React 4 函式式元件

函式式元件中，沒有 state 和 生命週期，所以又被稱為 無狀態元件 在react16.7 beta測試 版本中，函式元件一直當作純渲染元件來使用 1.元件的第0個引數,是props,接收父級傳遞過來的資訊 2.元件中的 return 必須寫 定義該元件要渲染的內容 3.沒有生命週期 只在類式元件...

react父子元件傳參

父子元件通訊主要用到props，如下 在父元件中 import react from react import childcom from childcom.js class parentcom extends react.component export default parentcom 複製 ...