react 父子元件,兄弟元件傳值

2021-10-01 14:21:10 字數 1493 閱讀 8024

昨天學習了class,今天開始學元件傳值了,說真的,我這都學第二遍了還是沒有繞過來(笑哭 哭笑 笑出眼淚 破涕為笑 笑死 笑尿 笑cry)所以我趕緊跑過來寫到這裡,跟小夥伴們一起學習一下,也能更好的加深一下印象,廢話不多說,下面就讓我們開始吧!

【先來看一下父傳子:】

//父元件**:

//建立建構函式:

constructor

(props)

}render()

/>

<

/div>)}

//子元件**

render()

<

/p>

<

/div>

)}

【再來看一下子傳父:】

//父元件**

class

home

extends

component

}handlebutton

=(msg)

=>)}

render()

/>

//這裡給子元件定義乙個屬value_button性為this

<

/div>)}

}//子元件**:

render()

>子元件給父元件傳值<

/button>

<

/div>

)}

子元件新增乙個按鈕定義乙個onclick事件this.props.value_button.handlebutton就可以呼叫父元件的方法並使用bind繫結this和傳遞引數.

【再來看一下兄弟傳值:】

//父元件

class

father

extends

react.component

}//用於接收son.js元件的資料函式

sondatas

(msg));

console.

log(

"在father.js中展示son.js生成的資料:"

+msg);}

render()

>

<

/son>

>

<

/son2>

<

/react.fragment>);

}}//子元件

class

sonextends

react.component

render()

>son元件中的按鈕獲取資料<

/button>

<

/react.fragment>);

}}//第二個子元件

class

son2

extends

react.component

<

/h1>

<

/react.fragment>);

}}

see you!!!

vue 元件傳值 父子元件傳值,兄弟元件傳值

父向子 v bind props 子元件 子元件 props msg props接收 props 驗證 props food接受數值型別的引數,如果不傳入的話預設就是100 food fooe接受物件型別的引數 fooe foof使用乙個自定義的驗證器 foof foog props 是單向繫結的 ...

React 父子元件傳值

什麼叫模組化元件化的開發模式,把共同的部分提取出來。就比如html中的頭部都需要用到,我們就把這部分提取出來。引入乙個 react 定義資料和結果 export default home 就是把元件暴露出來,在其他地方引用這個元件就可以使用。react 元件解決html構建的不足 import re...

React父子元件傳值

父元件傳值給子元件 父元件呼叫子元件方法 父元件 import react from react import from ant design pro layout import childrenorder from components childrenorder 引入子元件 class proc...