React中元件定義使用詳解
這次帶給大家React中元件定義使用詳解，React中元件定義使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
元件
元件可讓你將 UI 分割為一個一個獨立，可重複使用的小元件，並且可以對每個元件進行單獨的設計。
在單一頁面應用程式(SPA)中扮演著重要角色
元件簡單實作－ 函數式元件
import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
return <h1>React Component</h1>
}
ReactDOM.render(
<Component1 />,
document.getElementById('app')
)類別元件－ ES5 語法
var React = require('react');
var ReactDOM = require('react-dom')
var Component1 = React.createClass({
render: function(){
return (
<p>
<h1>Tom</h1>
<h1>Sam</h1>
</p>
)
}
})
ReactDOM.render(
<Component1 />,
document.getElementById('app')
)類別元件－ ES6 語法
import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
render(){
return (
<p>
<h1>Tom</h1>
<h1>Sam</h1>
</p>
)
}
}
ReactDOM.render(
<Component1 />,
document.getElementById('app')
)效果預覽
元件小結
元件名稱首字母必須為大寫
#函數傳回一個虛擬DOM 節點
##類別元件必須要有render 方法
render 必須回傳一個虛擬DOM 節點
實際工作中，類別元件是常用的方式
因為元件的呼叫是html 標籤的形式，而html 標籤是可以新增屬性，所以在React 的元件當中也是可以加入自訂的屬性，而屬性的取得則用this.props##函數式元件
import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = (props) => {
return <h1>name-{props.name}</h1>
}
ReactDOM.render(
<Component1 name="Sam"/>,
document.getElementById('app')
)類別元件
import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
render(){
return <h1>name-{this.props.name}</h1>
}
}
ReactDOM.render(
<Component1 name="Sam"/>,
document.getElementById('app')
)- 預設屬性(DefaultProps)
-
元件的屬性除了可以透過呼叫的時候以DOM 節點屬性的方式傳值，也可以設定預設的屬性值，如果呼叫的時候沒有傳遞對應的屬性值，則會用預設的屬性值。
這個方法只會被呼叫一次。getDefalutProps
//es5
var React = require('react');
var ReactDOM = require('react-dom');
var Component1 = React.createClass({
getDefaultProps: function(){
return {
name: 'Tom',
age: 20
}
},
render: function(){
return (
<p>
<p>姓名：{this.props.name}</p>
<p>年龄：{this.props.age}</p>
</p>
)
}
})
//es6
import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
static defaultProps = {
name: 'Tom',
age: 20
}
render(){
return (
<p>
<h1>姓名：{this.props.name}</h1>
<h1>年龄：{this.props.age}</h1>
</p>
)
}
}
//或者
Component1.defaultProps = {
name: "Sam",
age: 22
}
//使用
ReactDOM.render(<Component1/>, document.getElementById('p1'));通常情況下，在定義一個元件的時候把屬性定義好，會加上一些使用的條件限制，例如某些屬性值的資料型別
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types'
class Component1 extends React.Component{
render(){
return (
<p>
<p>姓名：{this.props.name}</p>
<p>年龄：{this.props.age}</p>
<p>学科：</p>
<ul>
{
this.props.subjects.map(function(_item){
return <li>{_item}</li>
})
}
</ul>
</p>
)
}
}
//定义属性 name 为字符串且必须有值
Component1.propTypes = {
name: PropTypes.string
}
ReactDOM.render(<Component1 name="Tom"/>, document.getElementById('p1'));prop 預設是可選，常用的類型：
#PropTypes.array
PropTypes.bool
PropTypes.func
PropTypes.number
PropTypes.object
#PropTypes.string
#PropTypes.symbol
#PropTypes.any.isRequired
- 元件元件可讓你將UI 分割為一個獨立，可重複使用的小元件，並且可以對每個元件進行單獨的設計。
- 在單一頁面應用程式(SPA)中扮演著重要角色元件簡單實作－ 函數式元件
import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = () => {
return <h1>React Component</h1>
}
ReactDOM.render(
<Component1 />,
document.getElementById('app')
)var React = require('react');
var ReactDOM = require('react-dom')
var Component1 = React.createClass({
render: function(){
return (
<p>
<h1>Tom</h1>
<h1>Sam</h1>
</p>
)
}
})
ReactDOM.render(
<Component1 />,
document.getElementById('app')
)import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
render(){
return (
<p>
<h1>Tom</h1>
<h1>Sam</h1>
</p>
)
}
}
ReactDOM.render(
<Component1 />,
document.getElementById('app')
)import React from 'react'
import ReactDOM from 'react-dom'
let Component1 = (props) => {
return <h1>name-{props.name}</h1>
}
ReactDOM.render(
<Component1 name="Sam"/>,
document.getElementById('app')
)import React from 'react'
import ReactDOM from 'react-dom'
class Component1 extends React.Component{
render(){
return <h1>name-{this.props.name}</h1>
}
}
ReactDOM.render(
<Component1 name="Sam"/>,
document.getElementById('app')
)//es5
var React = require('react');
var ReactDOM = require('react-dom');
var Component1 = React.createClass({
getDefaultProps: function(){
return {
name: 'Tom',
age: 20
}
},
render: function(){
return (
<p>
<p>姓名：{this.props.name}</p>
<p>年龄：{this.props.age}</p>
</p>
)
}
})
//es6
import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
static defaultProps = {
name: 'Tom',
age: 20
}
render(){
return (
<p>
<h1>姓名：{this.props.name}</h1>
<h1>年龄：{this.props.age}</h1>
</p>
)
}
}
//或者
Component1.defaultProps = {
name: "Sam",
age: 22
}
//使用
ReactDOM.render(<Component1/>, document.getElementById('p1'));属性的类型规则(propTypes)
通常情况下，在定义一个组件的时候把属性定义好，会加上一些使用的条件限制，比如某些属性值的数据类型必须是数组，或者某些属性不能为空，在这个时候，可以通过 propTypes 来设置。
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types'
class Component1 extends React.Component{
render(){
return (
<p>
<p>姓名：{this.props.name}</p>
<p>年龄：{this.props.age}</p>
<p>学科：</p>
<ul>
{
this.props.subjects.map(function(_item){
return <li>{_item}</li>
})
}
</ul>
</p>
)
}
}
//定义属性 name 为字符串且必须有值
Component1.propTypes = {
name: PropTypes.string
}
ReactDOM.render(<Component1 name="Tom"/>, document.getElementById('p1'));相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是React中元件定義使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
百度網盤app怎麼用
Mar 27, 2024 pm 06:46 PM
在如今雲端儲存已成為我們日常生活和工作中不可或缺的一部分。百度網盤作為國內領先的雲端儲存服務之一，憑藉其強大的儲存功能、高效的傳輸速度以及便捷的操作體驗，贏得了廣大用戶的青睞。而且無論你是想要備份重要文件、分享資料，還是在線上觀看影片、聽取音樂，百度網盤都能滿足你的需求。但很多用戶可能對百度網盤app的具體使用方法還不了解，那麼這篇教學就將為大家詳細介紹百度網盤app如何使用，還有疑惑的用戶們就快來跟著本文詳細了解一下吧！百度雲網盤怎麼用：一、安裝首先，下載並安裝百度雲軟體時，請選擇自訂安裝選
網易信箱大師怎麼用
Mar 27, 2024 pm 05:32 PM
網易郵箱，作為中國網友廣泛使用的一種電子郵箱，一直以來以其穩定、高效的服務贏得了用戶的信賴。而網易信箱大師，則是專為手機使用者打造的信箱軟體，它大大簡化了郵件的收發流程，讓我們的郵件處理變得更加便利。那麼網易信箱大師該如何使用，具體又有哪些功能呢，下文中本站小編將為大家帶來詳細的內容介紹，希望能幫助到大家！首先，您可以在手機應用程式商店搜尋並下載網易信箱大師應用程式。在應用寶或百度手機助手中搜尋“網易郵箱大師”，然後按照提示進行安裝即可。下載安裝完成後，我們打開網易郵箱帳號並進行登錄，登入介面如下圖所示
BTCC教學：如何在BTCC交易所綁定使用MetaMask錢包？
Apr 26, 2024 am 09:40 AM
MetaMask（中文也叫小狐狸錢包）是一款免費的、廣受好評的加密錢包軟體。目前，BTCC已支援綁定MetaMask錢包，綁定後可使用MetaMask錢包進行快速登錄，儲值、買幣等，且首次綁定還可獲得20USDT體驗金。在BTCCMetaMask錢包教學中，我們將詳細介紹如何註冊和使用MetaMask，以及如何在BTCC綁定並使用小狐狸錢包。 MetaMask錢包是什麼？ MetaMask小狐狸錢包擁有超過3,000萬用戶，是當今最受歡迎的加密貨幣錢包之一。它可免費使用，可作為擴充功能安裝在網絡
小米汽車app怎麼用
Apr 01, 2024 pm 09:19 PM
小米汽車軟體提供遠端車控功能，讓使用者可以透過手機或電腦遠端控制車輛，例如開關車輛的門窗、啟動引擎、控制車輛的空調和音響等，下文就是這個軟體的使用及內容，一起了解下吧。小米汽車app功能及使用方法大全1、小米汽車app在3月25日上線蘋果AppStore，現在安卓手機的應用商店中也可以下載了;購車：了解小米汽車核心亮點和技術參數，可預約試駕、配置訂購您的小米汽車，支援線上處理提車待辦事項。 3.社群：了解小米汽車品牌資訊，交流用車體驗，分享精彩車生活;4、車控：手機就是遙控器，遠端控制，即時安防，輕
PHP模運算子的作用及用法詳解
Mar 19, 2024 pm 04:33 PM
PHP中的模運算子（%）是用來取得兩個數值相除的餘數的。在本文中，我們將詳細討論模運算子的作用及用法，並提供具體的程式碼範例來幫助讀者更好地理解。 1.模運算子的作用在數學中，當我們將一個整數除以另一個整數時，就會得到一個商和一個餘數。例如，當我們將10除以3時，商數為3，餘數為1。模運算子就是用來取得這個餘數的。 2.模運算子的用法在PHP中，使用%符號來表示模
Java框架與前端React框架的整合
Jun 01, 2024 pm 03:16 PM
Java框架與React框架的整合：步驟：設定後端Java框架。建立專案結構。配置建置工具。建立React應用程式。編寫RESTAPI端點。配置通訊機制。實戰案例（SpringBoot+React）：Java程式碼：定義RESTfulAPI控制器。 React程式碼：取得並顯示API回傳的資料。
如何正確地在 Go 語言中使用空格
Mar 29, 2024 pm 03:42 PM
Go語言是一種簡單、有效率、並發性強的程式語言，它是由Google開發的開源語言。在Go語言中，空格的使用是非常重要的，它能夠提高程式碼的可讀性和易於維護性。本文將介紹如何正確地在Go語言中使用空格，並提供具體的程式碼範例。為什麼需要正確使用空格在程式設計過程中，空格的使用對於程式碼的可讀性和美觀性非常重要。恰當地使用空格可以讓程式碼更加清晰、易讀，從而減
全角字符的定義及使用
Mar 25, 2024 pm 03:33 PM
什麼是全角字元？在電腦編碼系統中，全角字元是一種佔用兩個標準字元位置的字元編碼方式。相對應的，佔用一個標準字元位置的字元編碼方式稱為半角字元。全角字元通常用於中文、日文、韓文等亞洲文字的輸入、顯示和列印。在中文輸入法和文字編輯中，全角字符與半角字符的使用場景是有所區別的。全角字符的使用中文輸入法：在中文輸入法中，通常全角字符用於輸入中文字符，例如漢字、標
