React父子元件傳參和方法呼叫

需要準備知識

props

props是唯讀的,不可以使用this.props直接修改props，props是用於整個元件樹中傳遞資料和配置。在當前元件訪問props，使用this.props。

方法傳遞

由於react是單項資料流；所以如果子元件需要呼叫父元件的方法，只能讓父元件將方法傳遞子元件上，有子元件通過this.props.方法呼叫；或者通過閉包在方法上呼叫；

父元件

import

*as react from
'react'
;import child from
'./child'
inte***ce
iparentprops
class
parent
extends
react.component
>
;constructor
(props);}
// 普通方法
private
rendertext
=(str:string)
=>
=this
.props;
console.
log(
this
)this
.setstate()
}// 閉包方法
private
handelview
=(viewid: string)
=>()
=>
=this
.props
settimeout
(function()
,2000)}
render()
=this
.props;
return
(hello, world!
<
/h1>
it is 
.<
/h2>
hooktitle=
onhook=
handelview=
>
<
/child>
<
/div>);
}}export
default parent;

import

*as react from
'react'
;/**
*	注意下面handelview是閉包函式的寫法，可以直接在render中呼叫，不需要通過this.props.方法呼叫
*/inte***ce
iparentprops
class
child
extends
react.component
this
.handelclick =
this
.handelclick.
bind
(this)}
private
handelclick()
render()
=this
.props;
return
(<
/span>
>呼叫onhook函式<
/button>
> 呼叫父元件閉包函式<
/button>
<
/div>)}
}export
default child;

一種是通過普通的函式，子元件呼叫時候通過this.props.方法 ()

第二種是提供閉包函式；注意子元件引數需要寫成閉包型別；可以直接呼叫；

react父子元件傳參

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

react元件傳參方法

1.props傳參 在子元件中 this props.age 獲取資料 setage v this setstate setage 在子元件使用 2.上下文傳遞引數 context 1.引入的context資料 時 實時更新 當乙個資料發生改變所有引用資料的檢視發生改變 父元件1匯入型別檢測 imp...

父子元件傳參

這個是父子傳參的乙個語法糖，官網上也有推薦，可以去看一下 一般父子傳參都會這麼寫 父 1 子 1 export default,12 13 1415 子元件可以接收來自父元件的modalvisible。子元件如果要修改modalvisible，可以在自己的data中定義乙個變數 tempmodalv...