React創(chuàng)建組件的的方式匯總
1. 使用函數(shù)創(chuàng)建組件
函數(shù)組件:使用JS的函數(shù)(或箭頭函數(shù))創(chuàng)建的組件
約定1:函數(shù)名稱必須以大寫字母開頭
約定2:函數(shù)組件必須有返回值,表示該組件的結(jié)構
如果返回值為null,表示不渲染任何內(nèi)容
function Hello() { return ( <div>這是我的第一個函數(shù)組件!</div> ) } const Hello = () => <div>這是我的第一個函數(shù)組件!</div>
渲染函數(shù)組件:用函數(shù)名作為組件標簽名
組件標簽可以是單標簽也可以是雙標簽
//1. 導入react import React from 'react'; import ReactDOM from 'react-dom'; /* 函數(shù)組件: */ function Hello() { return ( <div>這是我的第一個函數(shù)組件!</div> ) } //渲染組件 ReactDOM.render(<Hello />, document.getElementById('root'))
2. 使用類創(chuàng)建組件
組件類:使用ES6的class創(chuàng)建的組件
約定1:類名稱也必須以大寫字母開頭
約定2:類組件應該繼承React.Component父類,從而可以使用父類中提供的方法或?qū)傩?/p>
約定3:類組件必須提供render()方法
約定4:render()方法必須有返回值,表示該組件的結(jié)構
//1. 導入react import React from 'react'; import ReactDOM from 'react-dom'; /* 函數(shù)組件: */ function Hello() { return ( <div>這是我的第一個函數(shù)組件!</div> ) } //渲染組件 ReactDOM.render(<Hello />, document.getElementById('root'))
3. 抽離為獨立JS文件
1. 創(chuàng)建Hello.js
2. 在Hello.js中導入React
3. 創(chuàng)建組件(函數(shù)或類)
4. 在Hello.js中導出該組件
5. 在index.js中導入Hello組件
6. 渲染組件
Hello.js
import React from "react"; //創(chuàng)建組件 class Hello extends React.Component { render () { return ( <div>這是我的第一個抽離到js文件中的組件!</div> ) } } //導出組件 export default Hello
index.js
//1. 導入react import React from 'react'; import ReactDOM from 'react-dom'; /* 抽離組件到獨立的JS文件中: */ //導入Hello組件 import Hello from './Hello'; //渲染組件 ReactDOM.render(<Hello />, document.getElementById('root'))
到此這篇關于React組件的兩種創(chuàng)建方式的文章就介紹到這了,更多相關React組件創(chuàng)建方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
React Native自定義Android的SSL證書鏈校驗
這篇文章主要為大家介紹了React Native自定義Android的SSL證書鏈校驗示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10React Native:react-native-code-push報錯的解決
這篇文章主要介紹了React Native:react-native-code-push報錯的解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10React Native時間轉(zhuǎn)換格式工具類分享
這篇文章主要為大家分享了React Native時間轉(zhuǎn)換格式工具類,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10react嵌套路由實現(xiàn)TabBar的實現(xiàn)
本文主要介紹了react嵌套路由實現(xiàn)TabBar的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-08-08