實例講解React 組件
本章節(jié)我們將討論如何使用組件使得我們的應(yīng)用更容易來管理。
接下來我們封裝一個輸出 "Hello World！" 的組件，組件名為 HelloMessage：
function HelloMessage(props) {
return <h1>Hello World!</h1>;
}
const element = <HelloMessage />;
ReactDOM.render(
element,
document.getElementById('example')
);
實例解析：
1、我們可以使用函數(shù)定義了一個組件：
function HelloMessage(props) {
return <h1>Hello World!</h1>;
}
你也可以使用 ES6 class 來定義一個組件:
class Welcome extends React.Component {
render() {
return <h1>Hello World!</h1>;
}
}
2、const element = <HelloMessage /> 為用戶自定義的組件。
注意，原生 HTML 元素名以小寫字母開頭，而自定義的 React 類名以大寫字母開頭，比如 HelloMessage 不能寫成 helloMessage。除此之外還需要注意組件類只能包含一個頂層標(biāo)簽，否則也會報錯。
如果我們需要向組件傳遞參數(shù)，可以使用 this.props 對象,實例如下：
function HelloMessage(props) {
return <h1>Hello {props.name}!</h1>;
}
const element = <HelloMessage name="jb51"/>;
ReactDOM.render(
element,
document.getElementById('example')
);
以上實例中 name 屬性通過 props.name 來獲取。
注意，在添加屬性時， class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字。
復(fù)合組件
我們可以通過創(chuàng)建多個組件來合成一個組件，即把組件的不同功能點進行分離。
以下實例我們實現(xiàn)了輸出網(wǎng)站名字和網(wǎng)址的組件：
function Name(props) {
return <h1>網(wǎng)站名稱：{props.name}</h1>;
}
function Url(props) {
return <h1>網(wǎng)站地址：{props.url}</h1>;
}
function Nickname(props) {
return <h1>網(wǎng)站小名：{props.nickname}</h1>;
}
function App() {
return (
<div>
<Name name="腳本之家" />
<Url url="http://m.fzitv.net/" />
<Nickname nickname="jb51" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('example')
);
輸出結(jié)果：
以上就是實例講解React 組件的詳細內(nèi)容，更多關(guān)于React 組件的資料請關(guān)注腳本之家其它相關(guān)文章！
- React嵌套組件的構(gòu)建順序
- 編寫簡潔React組件的小技巧
- 使用hooks寫React組件需要注意的5個地方
- react實現(xiàn)Radio組件的示例代碼
- 詳解對于React結(jié)合Antd的Form組件實現(xiàn)登錄功能
- 基于react hooks,zarm組件庫配置開發(fā)h5表單頁面的實例代碼
- React antd tabs切換造成子組件重復(fù)刷新
- 在react-antd中彈出層form內(nèi)容傳遞給父組件的操作
- 在react項目中使用antd的form組件,動態(tài)設(shè)置input框的值
- react實現(xiàn)復(fù)選框全選和反選組件效果
- 利用React高階組件實現(xiàn)一個面包屑導(dǎo)航的示例
- 實例講解React 組件生命周期
- 詳解React 父組件和子組件的數(shù)據(jù)傳輸
相關(guān)文章
這篇文章主要介紹了React?Native采用Hermes熱更新打包實戰(zhàn),在傳統(tǒng)的熱更新方案中，我們實現(xiàn)熱更新需要借助code-push開源方案，包括熱更新包的發(fā)布兩種方式詳解，感興趣的朋友一起看看吧2022-05-05
使用 Rails API 構(gòu)建一個 React 應(yīng)用程序的詳細步驟
這篇文章主要介紹了使用 Rails API 構(gòu)建一個 React 應(yīng)用程序的詳細步驟，主要包括后端：Rails API部分，前端：React部分及React組件的相關(guān)操作，具有內(nèi)容詳情跟隨小編一起看看吧2021-08-08
MobX 是一個簡潔的狀態(tài)管理庫,它通過透明的函數(shù)響應(yīng)式編程（TFRP）使得狀態(tài)管理變得簡單和可擴展,下面就跟隨小編一起來了解一下如何在React函數(shù)式組件中使用MobX吧2024-01-01
React利用props的children實現(xiàn)插槽功能
React中并沒有vue中的?slot?插槽概念?不過?可以通過props.children?實現(xiàn)類似功能，本文為大家整理了實現(xiàn)的具體方，需要的可以參考一下2023-07-07
解決antd的Table組件使用rowSelection屬性實現(xiàn)多選時遇到的bug
這篇文章主要介紹了解決antd的Table組件使用rowSelection屬性實現(xiàn)多選時遇到的bug問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了react之umi配置國際化語言locale的踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
本文主要介紹了React四級菜單的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
使用React18和WebSocket構(gòu)建實時通信功能詳解
WebSocket是一種在Web應(yīng)用中實現(xiàn)雙向通信的協(xié)議,它允許服務(wù)器主動向客戶端推送數(shù)據(jù),而不需要客戶端發(fā)起請求,本文將探索如何在React?18應(yīng)用中使用WebSocket來實現(xiàn)實時通信,感興趣的可以了解下2024-01-01
本文主要介紹了React-Router6版本的更新引起的路由用法變化，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
react中代碼塊輸出,代碼高亮顯示,帶行號,能復(fù)制的問題
這篇文章主要介紹了react中代碼塊輸出，代碼高亮顯示，帶行號，能復(fù)制的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09