摘要:當組件裝載完畢時,就會被調用。它可以是一個回調函數,這個回調函數會在組件被掛載后立即執行。也可以是一個字符串吧放到原生的組件中,我們可以通過獲取到節點而如果吧放到組件上獲取到的就是組件的實例上一篇開發教程五生命周期下一篇開發教程七事件系統
ReactDOM
findeDOMNoderefs語法:DOMElement findDOMNode(ReactComponent component)
描述:獲取改組件實例相對應的DOM節點 案例:import React, { Component } from "react"; import ReactDOM from "react-dom"; class App extends Component { componentDidMount() { const dom = ReactDOM.findDOMNode(this) } render() {} }render語法:
ReactComponent render( ReactElement element, DOMElement container, [function callback] )描述:改方法吧元素掛載到container中,并且返回element的實例(即refs的引用)。當組件裝載完畢時,callback就會被調用。
import React, { Component } from "react"; import ReactDOM from "react-dom"; class App extends Component { componentDidMount() { const dom = ReactDOM.findDOMNode(this) } render() {} }unstable_renderSubtreeIntoContainer語法:
ReactComponent unstable_renderSubtreeIntoContainer( parentComponent component, ReactElement element, DOMElement container, [function callback] )描述:更新組件到傳入的DOM節點上,可以使用它完成在組件內部實現跨組件的DOM操作
import React, { Component } from "react"; import ReactDOM from "react-dom"; class App extends Component { componentDidMount() { const dom = ReactDOM.findDOMNode(this) } render() {} }
它是react組件中非常特殊的prop,可以附加到任何一個組件上,組件調用是會新建一個該組件的實例,而refs就會指向這個實例。
它可以是一個回調函數,這個回調函數會在組件被掛載后立即執行。
this.textInput = ref} />
也可以是一個字符串
吧refs放到原生的DOM組件中,我們可以通過refs獲取到DOM節點;而如果吧refs放到React組件上獲取到的就是組件的實例
上一篇:react開發教程(五)生命周期
下一篇:react開發教程(七)React事件系統
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/87183.html
摘要:按鈕中使用原生事件中提供了很好的合成事件系統,但有時候也需要用到原生事件。而使用合成事件系統時則不需要,因為內部以及處理了。事件類型鍵盤事件焦點事件表單事件鼠標事件選擇事件觸摸事件事件動畫事件圖像事件媒體事件剪貼板事件上一篇開發教程六與 事件系統 Virtual DOM在內存中是以對象的形式存在的,如果想要在這些對象上添加事件的話,React是基于Virtual DOM實現了一個合成事...
摘要:在組件的整個生命周期中,隨著該組件的或者發生改變,其表現也會有相應的變化。一個組件的生命周期分為三個部分實例化存在期和銷毀時。該方法會創建一個虛擬,用來表示組件的輸出。渲染組件上一篇開發教程四數據流下一篇開發教程六與 在組件的整個生命周期中,隨著該組件的props或者state發生改變,其DOM表現也會有相應的變化。一個組件就是一個狀態機,對于特定地輸入,它總返回一致的輸出。 一個Re...
閱讀 715·2021-09-29 09:34
閱讀 2567·2019-08-30 15:53
閱讀 3372·2019-08-29 17:17
閱讀 772·2019-08-29 16:08
閱讀 1133·2019-08-29 13:03
閱讀 960·2019-08-27 10:54
閱讀 696·2019-08-26 13:39
閱讀 2867·2019-08-26 13:34