如何使用React中的方法實現組件嵌套組件並顯示

在我們使用React中的方法定義組件時,可以利用類來定義組件,還可以在已定義的組件里調用外面的組件,這樣形成嵌套效果。下面利用實例說明如何實現組件嵌套組件,操作如下:

工具/原料

React
JavaScript
HTML5
CSS3
HBuilderX
截圖工具

方法/步驟

第一步,雙擊打開HBuilderX工具,並新建一個HTML5模板,引入相關的核心JS,如下圖所示:

第二步,接著在主體元素<body></body>插入一個div標籤,並設置id屬性值為treeDatas,如下圖所示:

第三步,在script標籤內,定義一個類Tree,繼承React.Component,如下圖所示:

第四步,在類Tree中創建構造函數,然後調用render()方法,並添加返回值,如下圖所示:

第五步,定義一個常量TreeList,然後使用箭頭函數返回一個div標籤,如下圖所示:

第六步,由於第五步中調用了Tree組件,接著在下方定義Tree,生成對應的標籤,如下圖所示:

注意事項

注意如何使用React中的方法定義組件
注意利用組件中嵌套使用組件,然後依次調用

相關文章

  1. 如何使用ES6中的方法比較對象和合併對象顯示

    在JavaScript新標準ES6中,如果要比較兩個對象是否一樣,可以使用Object.is():而如果想要將兩個對象進行合併,可以使用Object.assign().下面利用具體的實例說明這兩個方法 ...
  2. 如何使用JavaScript中的方法獲取不同進位數顯示

    在JavaScript字符串封裝的方法toString(),可以將其它類型的數據轉換成字符串:一般情況下,這個方法是不傳參數的,如果在toString()括號中添加參數(數值類型),下面利用幾個實例說 ...
  3. React中:"props" 及 組件通信(父傳子)

    以下關於React的props屬性的內容介紹都是我個人理解: 在react當中,我們常說的單向數據流值的說法,其實說的就是props屬性,最常見的props用法就是組件之間的通信---父組件向子組件傳 ...
  4. PS(photoshop)中摳圖方法比較

    處理圖片過程中,對圖片進行摳圖,是不可避免的一項事情.而在PS中就有多個摳圖方法,下面小編就和大家總結分析一下,這些摳圖方法的一些信息,希望可以幫助大家. 方法/步驟 利用魔術棒進行摳圖. 主要適用的 ...
  5. 生活中哪些方法可預防頸椎病

    頸椎病是我們日常生活中常見的疾病,越來越多的人有了頸椎病.可是很多人都不知道生活中哪些方法可預防頸椎病? 步驟/方法 養成良好的生活習慣,不要酗酒.長時間打牌.玩遊戲等. 伏案工作超過2小時,應做一次 ...
  6. 如何利用JavaScript中的方法移除和添加數組元素

    JavaScript中的方法splice()可以移除存在的元素或添加新元素,裡面包含有兩個參數或三個參數.下面利用幾個實例說明splice()方法的用法,操作如下: 工具/原料 JavaScript ...
  7. 如何利用JavaScript中的方法對數組元素進行排序

    JavaScript中的方法sort(),可以對數組中的元素進行排序,一般情況下是按照數值或字母升序排列.下面利用幾個實例說明sort()方法的用法,操作如下: 工具/原料 JavaScript ec ...
  8. 如何利用JavaScript中的方法entries返回新數組

    JavaScript中的entries()方法返回一個新數組疊代器,可以生成一個新的數組,然後利用for...of遍歷循環.下面利用幾個實例說明entries()方法的用法,操作如下: 工具/原料 J ...
  9. 將下劃線添加到PDF文件頁面內容中的方法

    將下劃線添加到PDF文件頁面內容中的方法?我們怎麼樣來給PDF文字添加下劃線呢?下面來看看具體的操作步驟. 方法/步驟 首先我們可以百度搜尋一款可以實現PDF文件編輯的工具來對相應的PDF文件進行編輯 ...
  10. 如何利用JavaScript中的方法UTC()獲取日期時間

    JavaScript中的方法UTC(),可以對給出展示的日期時間,它有七個參數:年份.月份.日期.小時.分鐘.秒鐘和毫秒,如果不給出值,默認為0.下面利用幾個實例說明UTC()方法的用法,操作如下: ...
  11. 平面設計中色彩搭配方法

    色彩搭配,其目的是為了衝擊視覺,產生美的心理感受.平面設計中進行作品設計時,如何將多種色彩配置在一起,達到完美的效果,因而色彩的搭配方法成了我們努力研究的重點. 方法/步驟 (一)以色相為依據的色彩搭 ...
  12. 如何利用JavaScript中的方法向數組裡添加元素

    JavaScript中的push方法,可以向數組裡添加元素:push()方法參數可以包含有一個或一個以上,返回的結果是添加元素後數組的長度.下面利用幾個實例說明push()方法的用法,操作如下: 工具 ...
  13. sql server數據表導入到excel中的方法

    excel功能的強大勿用多說,它不但有自己的格式,同時還兼容其它多種格式的數據,甚至直接從資料庫中讀取數據也是輕而易舉,今天我們就介紹下如何從sql server中讀取數據. 工具/原料 excel ...
  14. 初一語文知識重點:作文中描寫方法

    總體來說,描寫有以下一些作用:①再現自然風光.②描繪人物的外貌及內心世界.③交代人物活動的自然及社會環境.卓越教育小編為大家整理了相關資料,以供參考. 1.五種人物的描寫方法:肖像(外貌)描寫.語言描 ...
  15. php中怎麼用ReflectionClass中的方法獲取類信息

    可以通過ReflectionClass判斷類的屬性信息,如是否為接口.是否為抽象類等. 工具/原料 php 方法/步驟 定義一個類Cls150524及對應的反射對象$cls150524_info. 可 ...
  16. VB6.0中Print方法使用分號(;)與逗號(,)的區別

    VB6.0中Print方法在編程中用的很多,可以在窗體或者圖片框中進行結果的輸出.在使用Print方法時可以通過代碼的調整,輸出不同的格式,比如上三角形.下三角形等各種圖案. 在此重點講解Print方 ...
  17. 日常生活中哪些方法可以預防頸椎病

    人們已經從談虎色變轉變為談頸色變了,頸椎病已經成為困擾人們健康生活的一大骨科疾病,而且越來越多的年輕人也出現了頸椎病.預防頸椎病也提上了日程,日常生活中哪些方法可以預防頸椎病呢? 步驟/方法 每天堅持 ...
  18. C#中神秘方法的一個深層次的一個解說

    一個程序必須有其算法和結構,而算法也就是方法按照一定的邏輯來計算.那麼掌握了方法的類型就能夠在算法中無往不利.希望下面的內容對您有所幫助. 工具/原料 C#編譯器 方法/步驟 方法的一個語法結構 方法 ...
  19. 有點抑鬱症不用怕,教你幾中好方法

    抑鬱症是一種常見的心境障礙,可由各種原因引起,以顯著而持久的心境低落為主要臨床特徵,且心境低落與其處境不相稱,嚴重者可出現自殺念頭和行為.多數病例有反覆發作的傾向,每次發作大多數可以緩解,部分可有殘留 ...
  20. 如何利用JavaScript中的方法過濾數組中的元素

    JavaScript中的數組含有自帶的方法,可以根據條件過濾數組元素,下面有這麼一個場景: (1)創建新數組並賦值 (2)利用數組長度.是否包含某個字符等過濾數組元素 具體使用實例說明,操作如下: 工 ...