實例講解React 組件

更新時間：2020年07月07日 16:31:13 作者：菜鳥教程

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

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

接下來我們封裝一個輸出 "Hello World！" 的組件，組件名為 HelloMessage：

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

實例解析：

1、我們可以使用函數定義了一個組件：

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。除此之外還需要注意組件類只能包含一個頂層標簽，否則也會報錯。

如果我們需要向組件傳遞參數，可以使用 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 的保留字。

復合組件

我們可以通過創(chuàng)建多個組件來合成一個組件，即把組件的不同功能點進行分離。

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

function Name(props) {
 return <h1>網站名稱：{props.name}</h1>;
}
function Url(props) {
 return <h1>網站地址：{props.url}</h1>;
}
function Nickname(props) {
 return <h1>網站小名：{props.nickname}</h1>;
}
function App() {
 return (
 <div>
  <Name name="腳本之家" />
  <Url url="http://www.dhdzp.com/" />
  <Nickname nickname="jb51" />
 </div>
 );
}
 
ReactDOM.render(
  <App />,
 document.getElementById('example')
);

輸出結果：

以上就是實例講解React 組件的詳細內容，更多關于React 組件的資料請關注腳本之家其它相關文章！

您可能感興趣的文章:

React?Native采用Hermes熱更新打包方案詳解
這篇文章主要介紹了React?Native采用Hermes熱更新打包實戰(zhàn),在傳統(tǒng)的熱更新方案中，我們實現(xiàn)熱更新需要借助code-push開源方案，包括熱更新包的發(fā)布兩種方式詳解，感興趣的朋友一起看看吧
2022-05-05
使用 Rails API 構建一個 React 應用程序的詳細步驟
這篇文章主要介紹了使用 Rails API 構建一個 React 應用程序的詳細步驟，主要包括后端：Rails API部分，前端：React部分及React組件的相關操作，具有內容詳情跟隨小編一起看看吧
2021-08-08
詳解如何在React函數式組件中使用MobX
MobX 是一個簡潔的狀態(tài)管理庫,它通過透明的函數響應式編程（TFRP）使得狀態(tài)管理變得簡單和可擴展,下面就跟隨小編一起來了解一下如何在React函數式組件中使用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的踩坑記錄
這篇文章主要介紹了react之umi配置國際化語言locale的踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-02-02
React四級菜單的實現(xiàn)
本文主要介紹了React四級菜單的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-04-04
使用React18和WebSocket構建實時通信功能詳解
WebSocket是一種在Web應用中實現(xiàn)雙向通信的協(xié)議,它允許服務器主動向客戶端推送數據,而不需要客戶端發(fā)起請求,本文將探索如何在React?18應用中使用WebSocket來實現(xiàn)實時通信,感興趣的可以了解下
2024-01-01
React-Router6版本的更新引起的路由用法變化
本文主要介紹了React-Router6版本的更新引起的路由用法變化，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-01-01
react中代碼塊輸出,代碼高亮顯示,帶行號,能復制的問題
這篇文章主要介紹了react中代碼塊輸出，代碼高亮顯示，帶行號，能復制的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-09-09