實例講解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)建多個組件來合成一個組件，即把組件的不同功能點進(jìn)行分離。
以下實例我們實現(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://www.dbjr.com.cn/" />
<Nickname nickname="jb51" />
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('example')
);
輸出結(jié)果：
以上就是實例講解React 組件的詳細(xì)內(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 Event實現(xiàn)原理,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
今天介紹下React手寫tab切換問題，代碼部分包括父文件，子文件及子文件tab樣式，本文通過實例代碼給大家介紹的非常詳細(xì)，感興趣的朋友跟隨小編一起看看吧2021-11-11
React Hooks之使用useCallback和useMemo進(jìn)行性能優(yōu)化方式
這篇文章主要介紹了React Hooks之使用useCallback和useMemo進(jìn)行性能優(yōu)化方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
在?React?Native?中給第三方庫打補(bǔ)丁的過程解析
這篇文章主要介紹了在?React?Native?中給第三方庫打補(bǔ)丁的過程解析,有時使用了某個React Native 第三方庫，可是它有些問題，我們不得不修改它的源碼，本文介紹如何修改源碼又不會意外丟失修改結(jié)果的方法，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了React中的聲明式渲染框架,我們先討論了命令式和聲明式這兩種范式的差異，其中命令式更加關(guān)注過程，而聲明式更加關(guān)注結(jié)果，對React渲染框架知識感興趣的朋友跟隨小編一起看看吧2022-06-06
Reducer是個純函數(shù)，即只要傳入相同的參數(shù)，每次都應(yīng)返回相同的結(jié)果。不要把和處理數(shù)據(jù)無關(guān)的代碼放在Reducer里，讓Reducer保持純凈，只是單純地執(zhí)行計算，這篇文章主要介紹了Redux拆分reducer函數(shù)流程2022-09-09
這篇文章主要為大家介紹了react函數(shù)組件類組件區(qū)別示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Context提供了一個無需為每層組件手動添加props，就能在組件樹間進(jìn)行數(shù)據(jù)傳遞的方法。在一個典型的 React 應(yīng)用中，數(shù)據(jù)是通過props屬性自上而下（由父及子）進(jìn)行傳遞的，但這種做法對于某些類型的屬性而言是極其繁瑣的2022-11-11
圖文示例講解useState與useReducer性能區(qū)別
這篇文章主要為大家介紹了useState與useReducer性能區(qū)別圖文示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
VSCode 配置React Native開發(fā)環(huán)境的方法
本篇文章主要介紹了VSCode 配置React Native開發(fā)環(huán)境的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12