目錄

• 1. 使用函式建立元件
• 2. 使用類建立元件
• 3. 抽離為獨立檔案

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檔案中www.cppcns.com：
*/

//匯入Hello元件
import Hello fromhttp://www.cppcns.com './Hello';

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

到此這篇關於React元件的兩種建立方式的文章就介紹到這了,更多相關React元件建立方式內容http://www.cppcns.com請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！