react中props 的使用及進(jìn)行限制的方法
更新時(shí)間：2021年04月28日 17:18:25 作者：河軟小寶
這篇文章主要介紹了react中的props 的使用及進(jìn)行限制的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
組件的props（ props是一個(gè)對(duì)象 ）
作用：接收傳遞給組件的數(shù)據(jù)
特點(diǎn)：
- 可以給組件傳遞任意類型的數(shù)據(jù)
- props是只讀的對(duì)象，只能讀取屬性的值，無(wú)法修改對(duì)象
- 注意：使用類組件時(shí)，如果寫了構(gòu)造函數(shù)，應(yīng)該將props傳遞給super()，否則，無(wú)法在構(gòu)造函數(shù)中獲取到
props props 的使用
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<!-- 引入react核心庫(kù) -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于將jsx 轉(zhuǎn)換為 js -->
<script src="../js/babel.min.js"></script>
<script type='text/babel'>
// 創(chuàng)建組件
class Person extends React.Component{
render() {
console.log(this);
const{name,age,sex} = this.props
return(
<ul>
<li>姓名：{name}</li>
<li>性別：{sex}</li>
<li>年齡：{age+1}</li>
</ul>
)
}
}
// 渲染組件到頁(yè)面
ReactDOM.render(<Person name="jerry" age={19} sex="男" />,document.getElementById('test1'))
ReactDOM.render(<Person name="tom" age={18} sex="女" />,document.getElementById('test2'))
const p = {name:'老劉',age:18,sex:'女'}
// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex} />,document.getElementById('test3'))
ReactDOM.render(<Person {...p} />,document.getElementById('test3'))
</script>
對(duì)props進(jìn)行限制
一定要引入 prop-types.js 否則會(huì)報(bào)錯(cuò)
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<!-- 引入react核心庫(kù) -->
<script src="../js/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script src="../js/react-dom.development.js"></script>
<!-- 引入babel 用于將jsx 轉(zhuǎn)換為 js -->
<script src="../js/babel.min.js"></script>
<!-- 引入prop-types, 用于對(duì)組件標(biāo)簽屬性進(jìn)行限制 引入后全局就多了一個(gè)對(duì)象 PropTypes -->
<script src="../js/prop-types.js"></script>
<script type='text/babel'>
// 創(chuàng)建組件
class Person extends React.Component{
render() {
console.log(this);
const{name,age,sex} = this.props
return(
<ul>
<li>姓名：{name}</li>
<li>性別：{sex}</li>
<li>年齡：{age+1}</li>
</ul>
)
}
}
// 限制規(guī)則
Person.propTypes = {
// 限制name 內(nèi)容為字符串 isRequired 表示該內(nèi)容為必須的不能省略
name:PropTypes.string.isRequired,
// 限制sex為字符串
sex: PropTypes.string,
// 限制age為數(shù)值
age: PropTypes.number,
// 限制speak為函數(shù)
speak: PropTypes.func
}
Person.defaultProps = {
sex:'男',// sex 默認(rèn)值 為男
age:18,
speak: function() {
return [1];
}
}
// 渲染組件到頁(yè)面
ReactDOM.render(<Person name="jerry" age={19} />,document.getElementById('test1'))
ReactDOM.render(<Person name="tom" age={18} sex="女" />,document.getElementById('test2'))
const p = {name:'老劉',age:18,sex:'女'}
// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex} />,document.getElementById('test3'))
ReactDOM.render(<Person {...p} />,document.getElementById('test3'))
</script>
Vue 對(duì)props進(jìn)行限定
我們可以為組件的 prop 指定驗(yàn)證要求，例如你知道的這些類型。如果有一個(gè)需求沒(méi)有被滿足，則 Vue 會(huì)在瀏覽器控制臺(tái)中警告你。這在開發(fā)一個(gè)會(huì)被別人用到的組件時(shí)尤其有幫助。
為了定制 prop 的驗(yàn)證方式，你可以為 props 中的值提供一個(gè)帶有驗(yàn)證需求的對(duì)象，而不是一個(gè)字符串?dāng)?shù)組。例如：
Vue.component('my-component', {
props: {
// 基礎(chǔ)的類型檢查 (`null` 和 `undefined` 會(huì)通過(guò)任何類型驗(yàn)證)
propA: Number,
// 多個(gè)可能的類型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 帶有默認(rèn)值的數(shù)字
propD: {
type: Number,
default: 100
},
// 帶有默認(rèn)值的對(duì)象
propE: {
type: Object,
// 對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取
default: function () {
return { message: 'hello' }
}
},
// 自定義驗(yàn)證函數(shù)
propF: {
validator: function (value) {
// 這個(gè)值必須匹配下列字符串中的一個(gè)
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
當(dāng) prop 驗(yàn)證失敗的時(shí)候，(開發(fā)環(huán)境構(gòu)建版本的) Vue 將會(huì)產(chǎn)生一個(gè)控制臺(tái)的警告。
注意那些 prop 會(huì)在一個(gè)組件實(shí)例創(chuàng)建之前進(jìn)行驗(yàn)證，所以實(shí)例的 property (如 data、computed 等) 在 default 或 validator 函數(shù)中是不可用的。
類型檢查
type 可以是下列原生構(gòu)造函數(shù)中的一個(gè)：
String Number Boolean Array Object Date Function Symbol
額外的，type 還可以是一個(gè)自定義的構(gòu)造函數(shù)，并且通過(guò) instanceof 來(lái)進(jìn)行檢查確認(rèn)。例如，給定下列現(xiàn)成的構(gòu)造函數(shù)：
function Person (firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
你可以使用：
Vue.component('blog-post', {
props: {
author: Person
}
})
來(lái)驗(yàn)證 author prop 的值是否是通過(guò) new Person 創(chuàng)建的。
到此這篇關(guān)于react 中的 props 的使用以及進(jìn)行限制的文章就介紹到這了,更多相關(guān)react props進(jìn)行限制內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
React組件中使用JSON數(shù)據(jù)文件的方法詳解
要在 React 組件中使用 JSON 數(shù)據(jù),有多種方法,這篇文章主要為大家詳細(xì)介紹了五個(gè)常見(jiàn)的方法,文中的示例代碼講解詳細(xì),有需要的小伙伴可以了解下2024-01-01
this在javascript中已經(jīng)相當(dāng)靈活，這篇文章主要介紹了React.js綁定this的5種方法(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
react?express實(shí)現(xiàn)webssh?demo解析
這篇文章主要為大家介紹了詳解react?express實(shí)現(xiàn)webssh?demo解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了React.Children的用法詳解，幫助大家更好的理解和學(xué)習(xí)使用React框架，感興趣的朋友可以了解下2021-04-04
mobx是一個(gè)輕量級(jí)的狀態(tài)管理器,所以很簡(jiǎn)單(單一全局?jǐn)?shù)據(jù)使用class)類有g(shù)et 數(shù)據(jù)方法,本文通過(guò)示例代碼介紹react mobx 基本用法,感興趣的朋友有一起看看2023-11-11
如何使用 React Router v6 在 React 中
面包屑在網(wǎng)頁(yè)開發(fā)中的角色不可忽視,它們?yōu)橛脩籼峁┝艘环N跟蹤其在網(wǎng)頁(yè)中當(dāng)前位置的方法,并有助于網(wǎng)頁(yè)導(dǎo)航,本文介紹了如何使用react-router v6和bootstrap在react中實(shí)現(xiàn)面包屑,感興趣的朋友一起看看吧2024-09-09
解決React報(bào)錯(cuò)Invalid hook call
這篇文章主要為大家介紹了React報(bào)錯(cuò)Invalid hook call解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
Immutable.js出自Facebook，是最流行的不可變數(shù)據(jù)結(jié)構(gòu)的實(shí)現(xiàn)之一。它實(shí)現(xiàn)了完全的持久化數(shù)據(jù)結(jié)構(gòu)，使用結(jié)構(gòu)共享。所有的更新操作都會(huì)返回新的值，但是在內(nèi)部結(jié)構(gòu)是共享的，來(lái)減少內(nèi)存占用2022-09-09
自定義Hook是一種自定義函數(shù),它封裝了React Hook的邏輯,并通過(guò)命名約定來(lái)使其可重用,本文主要介紹了React自定義Hook的實(shí)現(xiàn),感興趣的可以了解一下2023-11-11
本篇文章主要介紹了React Native 環(huán)境搭建的教程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08