React創建組件的的方式匯總
1. 使用函數創建組件
函數組件:使用JS的函數(或箭頭函數)創建的組件
約定1:函數名稱必須以大寫字母開頭
約定2:函數組件必須有返回值,表示該組件的結構
如果返回值為null,表示不渲染任何內容
function Hello() { return ( <div>這是我的第一個函數組件!</div> ) } const Hello = () => <div>這是我的第一個函數組件!</div>
渲染函數組件:用函數名作為組件標簽名
組件標簽可以是單標簽也可以是雙標簽
//1. 導入react import React from 'react'; import ReactDOM from 'react-dom'; /* 函數組件: */ function Hello() { return ( <div>這是我的第一個函數組件!</div> ) } //渲染組件 ReactDOM.render(<Hello />, document.getElementById('root'))
2. 使用類創建組件
組件類:使用ES6的class創建的組件
約定1:類名稱也必須以大寫字母開頭
約定2:類組件應該繼承React.Component父類,從而可以使用父類中提供的方法或屬性
約定3:類組件必須提供render()方法
約定4:render()方法必須有返回值,表示該組件的結構
//1. 導入react import React from 'react'; import ReactDOM from 'react-dom'; /* 函數組件: */ function Hello() { return ( <div>這是我的第一個函數組件!</div> ) } //渲染組件 ReactDOM.render(<Hello />, document.getElementById('root'))
3. 抽離為獨立JS文件
1. 創建Hello.js
2. 在Hello.js中導入React
3. 創建組件(函數或類)
4. 在Hello.js中導出該組件
5. 在index.js中導入Hello組件
6. 渲染組件
Hello.js
import React from "react"; //創建組件 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組件的兩種創建方式的文章就介紹到這瞭,更多相關React組件創建方式內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!