09 React 建立元件 使用元件

2021-08-31 01:12:06 字數 1149 閱讀 9997

建立好乙個react應用程式後,我們就需要建立元件並且使用元件,其實react開發本身就是建立元件、使用元件的過程。下面來看一下示例:

上圖中的html頁面上總共有三個元件:根元件、home元件和列表元件,下面就具體聊聊該怎麼建立這些元件以及如何使用它們。

建立元件:

1 我們修改一下預設建立的react應用程式的**結構,在src目錄下建立相應的資料夾及檔案,方便**檔案的組織管理,最終的**檔案結構圖如下所示:

2 我們在compotents目錄下建立了home、news兩個元件,也就是兩個js檔案,裡面的具體**如下所示:

home.js

import react, from 'react';

class home extends component

render()

}export default home;

news.js

import react, from "react";

class news extends component

}export default news;

由上述**可以看出建立元件的**大致相同,首先引入模組,然後定義元件,最後定義將元件匯出。如果需要樣式檔案的話我們再引入相應的樣式檔案即可。

注意:在定義組建的時候,一定要在所有的**外層包含乙個

由此,兩個簡單的元件已經建立完成,接下來我們就來使用它們。

import home from "./home";

import news from "./news";

3.2 在我們想用的地方就像使用html標記那樣使用它們就可以,如圖:

注意:使用元件時可以用單標籤的樣式,也可以用雙標籤樣式,至此,元件的建立和使用已經完成。

React的元件建立

在react中,元件分為兩種,類元件和函式式元件 簡單的共呢個使用函式式元件複雜功能使用類元件元件名首字母都必須大寫 使用es6建立的方式實現乙個元件 import react,from react export default class classcomponent extends compon...

react元件的建立

最近專案接觸react和rn,之前會一些vue和小程式,起初寫react是很難受的,尤其是jsx的寫法,不過2周過後感覺寫起來有點舒服了。這是早期react元件的建立方式,如果你看的文章是幾年之前寫的,很多都是這種方式 比如阮老師這篇react 入門例項教程 var likebutton react...

React中建立元件

1.第一種建立元件的方式 使用建構函式來建立元件,如果要接收外界傳遞的資料,需要在建構函式的引數列表中使用props來接收 必須要向外return乙個合法的jsx建立的虛擬dom 建立元件 注意 元件首字母必須要大寫,否則就會被當作乙個普通標籤來渲染,瀏覽器就識別不了報錯 function hell...