腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

軟件下載

android MAC 驅(qū)動(dòng)下載字體下載 DLL

源碼下載

PHP ASP.NET ASP JSP

軟件編程

C# JAVA C 語(yǔ)言 Delphi Android

網(wǎng)絡(luò)編程

PHP ASP.NET ASP JavaScript

在線工具

CSS格式化 JS格式化 Html轉(zhuǎn)化為Js

數(shù)據(jù)庫(kù)

MYSQL MSSQL oracle DB2 MARIADB

CMS

PHPCMS DEDECMS 帝國(guó)CMS WordPress

常用工具

PHP開(kāi)發(fā)工具 python Photoshop 必備軟件

React創(chuàng)建組件的的方式匯總

更新時(shí)間：2021年11月08日 10:05:24 作者：wslfw

React 是一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫(kù)。這篇文章主要介紹了React組件的兩種創(chuàng)建方式,一種是使用函數(shù)創(chuàng)建組件另一種是使用類創(chuàng)建組件，需要的朋友可以參考下

1. 使用函數(shù)創(chuàng)建組件

　　函數(shù)組件：使用JS的函數(shù)(或箭頭函數(shù))創(chuàng)建的組件

　　約定1：函數(shù)名稱必須以大寫字母開(kāi)頭

　　約定2：函數(shù)組件必須有返回值，表示該組件的結(jié)構(gòu)

　　如果返回值為null，表示不渲染任何內(nèi)容

function Hello() {
    return (
        <div>這是我的第一個(gè)函數(shù)組件！</div>
    )
}
const Hello = () => <div>這是我的第一個(gè)函數(shù)組件！</div>

渲染函數(shù)組件：用函數(shù)名作為組件標(biāo)簽名

組件標(biāo)簽可以是單標(biāo)簽也可以是雙標(biāo)簽

//1. 導(dǎo)入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  函數(shù)組件：
*/
function Hello() {
  return (
    <div>這是我的第一個(gè)函數(shù)組件！</div>
  )
}

//渲染組件
ReactDOM.render(<Hello />, document.getElementById('root'))

2. 使用類創(chuàng)建組件

　　組件類：使用ES6的class創(chuàng)建的組件

　　約定1：類名稱也必須以大寫字母開(kāi)頭

　　約定2：類組件應(yīng)該繼承React.Component父類，從而可以使用父類中提供的方法或?qū)傩?/p>

　　約定3：類組件必須提供render()方法

　　約定4：render()方法必須有返回值，表示該組件的結(jié)構(gòu)

//1. 導(dǎo)入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  函數(shù)組件：
*/
function Hello() {
  return (
    <div>這是我的第一個(gè)函數(shù)組件！</div>
  )
}

//渲染組件
ReactDOM.render(<Hello />, document.getElementById('root'))

3. 抽離為獨(dú)立JS文件

　　1. 創(chuàng)建Hello.js

　　2. 在Hello.js中導(dǎo)入React

　　3. 創(chuàng)建組件(函數(shù)或類)

　　4. 在Hello.js中導(dǎo)出該組件

　　5. 在index.js中導(dǎo)入Hello組件

　　6. 渲染組件

Hello.js

import React from "react";

//創(chuàng)建組件
class Hello extends React.Component {
    render () {
        return (
            <div>這是我的第一個(gè)抽離到j(luò)s文件中的組件！</div>
        )
    }
}

//導(dǎo)出組件
export default Hello

index.js

//1. 導(dǎo)入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  抽離組件到獨(dú)立的JS文件中：
*/

//導(dǎo)入Hello組件
import Hello from './Hello';

//渲染組件
ReactDOM.render(<Hello />, document.getElementById('root'))

到此這篇關(guān)于React組件的兩種創(chuàng)建方式的文章就介紹到這了,更多相關(guān)React組件創(chuàng)建方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: