ReactJS學習筆記 父子元件間的通訊

2021-07-27 15:55:17 字數 756 閱讀 1735

過去、現在、未來的每一天,組成了我們的故事。認真對待,都是美好的。

react元件間的通訊分為三種情況:

1、子元件呼叫父元件,採用props的方式進行呼叫和賦值,在父元件中設定相關屬性值或者方法,子元件通過props的方式進行屬性賦值或者方法呼叫;

2、父元件呼叫子元件,採用refs的方式進行呼叫,需要父元件在呼叫子元件的時候,新增ref屬性,並進行唯一命名,在父元件中即可呼叫;

3、使用全域性事件 pub/sub 模式,在 componentdidmount 裡面訂閱事件,在 componentwillunmount 裡面取消訂閱,當收到事件觸發的時候呼叫 setstate 更新 ui。(這裡暫時沒有學習)

react.render(

,document.getelementbyid('index-0331-0011')

);

以上就完成了子元件呼叫父元件的屬性及方法。

var imdaddycomponent = react.createclass(;

},//通過refs方式呼叫子元件的方法sendsword

sendsword: function () ,

getswordcount: function () );

},render: function () 把寶刀!!!);}

});

以上,就完成父元件呼叫子元件。

ReactJS入門之元件

元件是react中最重要也是最核心的概念,乙個網頁,可以被拆分成乙個個的元件 在react中,這樣定義乙個元件 import react from react class helloworld extends react.component 內容 export default helloworld ...

ReactJS入門之元件

元件是react中最重要也是最核心的概念,乙個網頁,可以被拆分成乙個個的元件 在react中,這樣定義乙個元件 import react from react 第一步,匯入react class helloworld extends react.component 內容 jsx語法 export d...

元件基礎(非父子元件傳值) Vue學習筆記

最近幾天忙著寫api去了,抽空把後面的內容下出來,然後再分享給大家web可以使用的api。上次說了父子元件直接的傳值,這次看一下非父子元件之間的傳值 匯流排機制 要實現非父子元件之間的傳值非常重要的一行 如下 vue.prototype.young new vue 在vue例項上掛載乙個為young...