快捷導(dǎo)航

實(shí)例講解React 組件

更新時(shí)間：2020年07月07日 16:31:13 作者：菜鳥(niǎo)教程

這篇文章主要介紹了React 組件的相關(guān)資料，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下

本章節(jié)我們將討論如何使用組件使得我們的應(yīng)用更容易來(lái)管理。

接下來(lái)我們封裝一個(gè)輸出 "Hello World！" 的組件，組件名為 HelloMessage：

function HelloMessage(props) {
 return <h1>Hello World!</h1>;
}
 
const element = <HelloMessage />;
 
ReactDOM.render(
 element,
 document.getElementById('example')
);

實(shí)例解析：

1、我們可以使用函數(shù)定義了一個(gè)組件：

function HelloMessage(props) {
 return <h1>Hello World!</h1>;
}

你也可以使用 ES6 class 來(lái)定義一個(gè)組件:

class Welcome extends React.Component {
 render() {
 return <h1>Hello World!</h1>;
 }
}

2、const element = <HelloMessage /> 為用戶自定義的組件。

注意，原生 HTML 元素名以小寫(xiě)字母開(kāi)頭，而自定義的 React 類(lèi)名以大寫(xiě)字母開(kāi)頭，比如 HelloMessage 不能寫(xiě)成 helloMessage。除此之外還需要注意組件類(lèi)只能包含一個(gè)頂層標(biāo)簽，否則也會(huì)報(bào)錯(cuò)。

如果我們需要向組件傳遞參數(shù)，可以使用 this.props 對(duì)象,實(shí)例如下：

function HelloMessage(props) {
 return <h1>Hello {props.name}!</h1>;
}
 
const element = <HelloMessage name="jb51"/>;
 
ReactDOM.render(
 element,
 document.getElementById('example')
);

以上實(shí)例中 name 屬性通過(guò) props.name 來(lái)獲取。

注意，在添加屬性時(shí)， class 屬性需要寫(xiě)成 className ，for 屬性需要寫(xiě)成 htmlFor ，這是因?yàn)?class 和 for 是 JavaScript 的保留字。

復(fù)合組件

我們可以通過(guò)創(chuàng)建多個(gè)組件來(lái)合成一個(gè)組件，即把組件的不同功能點(diǎn)進(jìn)行分離。

以下實(shí)例我們實(shí)現(xiàn)了輸出網(wǎng)站名字和網(wǎng)址的組件：

function Name(props) {
 return <h1>網(wǎng)站名稱(chē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é)果：

以上就是實(shí)例講解React 組件的詳細(xì)內(nèi)容，更多關(guān)于React 組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

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