React學習之旅 新建元件

2021-08-29 04:35:03 字數 993 閱讀 9969

react的元件有兩種寫法:

import react from 'react';

class news extends react.component

render ()

}export default news

es6中的super可以用在類的繼承中,super關鍵字,它指代父類的例項(即父類的this物件)。子類必須在constructor方法中呼叫super方法,否則新建例項時會報錯。這是因為子類沒有自己的this物件,而是繼承父類的this物件,然後對其進行加工。如果不呼叫super方法,子類就得不到this物件。

class person

}class student extends person

}為什麼官方的列子裡面寫個super(props):

只有乙個理由需要傳遞props作為super()的引數,那就是你需要在建構函式內使用this.props

那官方提供學習的例子中都是寫成super(props),所以說寫成super(props)是完全沒問題的,也建議就直接這樣寫。

另一種是:

import react,  from 'react';

class home extends component

}} render () )}}

export default home;

import react,  from 'react';

import logo from './assets/images/logo.svg';

// 引入home元件

import home from './components/home'

import news from './components/news'

// render 模版 jsx語法

render ()

}

yarn start 執行專案,即可載入我們的react元件

React學習之旅 父子元件傳值

父元件 import react from react import header from header import footer from footer class father extends react.component run getdata 獲取子元件傳過來的資料 getchildd...

react 路由Redirect元件學習

switch 是route 從上到下匹配,如果有乙個匹配,後面的就不會再繼續匹配了 redirectfrom屬性是位址與from匹配 可以用正則 才會重定向到to屬性指定的路徑 redirectfrom屬性如果沒有,則預設是匹配所有的路徑 import react,from react import...

react 高階元件學習流程

定義高階元件是乙個函式,引數為元件,返回值為新元件的函式 作用 1 提高元件復用率 2 可檢測性 3 保證元件功能的單一性 第一步 建立乙個函式,函式內return值為乙個新元件 接受的function作為引數本身帶有props,因此需要雙箭頭 const foo cmp props 第二步 建立乙...